躍然一笑
2018-11-07 13:13:42
css.container{ margin: 30px auto; width:600px; height: 300px;
}.p{ border:solid 3px #a33;
}.c{ width: 100px; height: 100px; background-color: #060; margin: 10px; float: left;
} <div class="container"> <div class="p">
<div style="clear:both">//為什么不能寫(xiě)元素之前? <div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div style="clear:both">
</div>
</div>帶有clear屬性的元素為什么不能寫(xiě)浮動(dòng)元素之前?
1 回答

人到中年有點(diǎn)甜
TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊
在 css 文檔里面規(guī)定 clear:both 的意思是:
要求框的頂邊框邊低于在源文檔中之前生成的任何浮動(dòng)框的底外邊距邊。
Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.
所以有 clear:both 屬性的元素放在浮動(dòng)元素之后才能起到閉合浮動(dòng)的作用。
我一般清除浮動(dòng)是通過(guò)浮動(dòng)元素的父元素的偽元素實(shí)現(xiàn)的。在你這個(gè)例子中就是
.p:after{ clear:both; display:block; content:""; }
after 偽元素是父元素的最后一個(gè)子元素,所以能清除這個(gè)塊里面的浮動(dòng)。
添加回答
舉報(bào)
0/150
提交
取消