float与clear
程序员文章站
2022-03-30 10:39:41
...
float
float:left或float:right，让元素浮动。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
li{
list-style:none;
width:20px;line-height:20px;
background-color:goldenrod;
float:left;
margin:5px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:0.75em;
}
clear
clear:left或clear:right或clear:both作用在非浮动元素上，以期望该元素与 其前面的浮动元素 不在一行显示。
-
clear:right时， 所有li仍然一行显示clear:right无效
li:nth-of-type(3){
clear:right;
}
-
clear:left时，li#3与其前面的li#2不在一行排列，换到了下一行clear:left有效
li:nth-of-type(3){
clear:left;
}
-
clear:both时，li#3与其前面的li#2不在一行排列，换到了下一行
效果与clear:left一样。
本例可以发现：clear:left有效，则clear:right必定无效。clear:left与clear:both效果相同。
试着让所有li都float:right，也会得到类似结论：clear:right有效，则clear:left必定无效。clear:right与clear:both效果相同。
可见，使用clear时，直接clear:both就好，不用纠结clear:left还是clear:right。
还有很重要的一点是，clear顾前不顾后，clear作用在某元素上，因此该元素将与其前面的浮动元素分行排列，但仍与其后面的浮动元素一行显示。
clear的限制
clear可以让某元素不与 其前面的浮动元素一行显示？是的。
但是有前提，clear只对display为block|table|list-item等块级元素有效。
-
clear对内联元素无效
比如，<img>
<body>
<div id='doraemon'>哆啦A梦怕老鼠</div>
<img src="./imgs/doraemon.gif">
</body>
#doraemon{
float:left;
}
img{
clear:both;
}
怎么办？
-
clear仅对块级元素有效，给<img>添加display:block
<body>
<div id="doraemon">哆啦A梦怕老鼠</div>
<img src="./imgs/doraemon.gif">
</body>
div{
float:left;
}
img{
clear:both;
display:block
}
还有其他办法么？
-
clear仅对块级元素有效，在浮动元素div#doraemon后添加一个空的块级元素
如，<div style='clear:both;'></div>
<body>
<div id="doraemon">哆啦A梦怕老鼠</div>
<div style='clear:both;'></div>
<img src="./imgs/doraemon.gif">
</body>
#doraemon{
float:left;
}
-
clear仅对块级元素有效，使用块级伪元素:before
稍微改动下html结构，用span包裹img
<body>
<div id="doraemon">哆啦A梦怕老鼠</div>
<span>
<img src="./imgs/doraemon.gif">
</span>
</body>
#doraemon{
float:left;
}
span:before{
display:block;
content:'';
clear:both;
}
span:before生成的块状伪元素成为span的第一个子节点。
-
clear仅对块级元素有效，使用块级伪元素:after
稍微改动下html结构，用div#container包裹div#doraemon
<div id="container">
<div id="doraemon">哆啦A梦怕老鼠</div>
</div>
<img src="./imgs/doraemon.gif">
</body>
#doraemon{
float:left;
}
#container:after{
display:block;
content:'';
clear:both;
}
#container:after生成的块级伪元素成为div#container的最后一个子节点。