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;
}
<p class="container">
<p class="p">
<p style="clear:both">//为什么不能写元素之前?
<p class="c"></p>
<p class="c"></p>
<p class="c"></p>
<p style="clear:both">
</p>
</p>
有clear屬性的元素為什麼不能寫浮動元素之前?
迷茫2017-05-19 10:34:04
在 css 文件裡面規定 clear:both 的意思是:
要求框的頂邊框邊低於在來源文件中之前產生的任何浮動框的底外邊距邊。
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 屬性的元素放在浮動元素之後才能起到閉合浮動的作用。
我一般清除浮動是透過浮動元素的父元素的偽元素實現的。在你這個例子中就是
.p:after{
clear:both;
display:block;
content:"";
}
after 偽元素是父元素的最後一個子元素,所以能清除這個區塊裡面的浮動。
给我你的怀抱2017-05-19 10:34:04
對於 clear
属性一定要牢记的是:
1) 该属性是针对元素本身的,比如说 A B C 三个浮动元素,想要清除C元素左边的浮动,则是将clear
作用在C上, 寫成:
C {
clear : left
}
当然你会想,写成
B {
clear : right;
}
行不行呢?答案是不行。因為clear
只能清除該元素之前的浮動。
"clear on an element only clears the floats before it in document order. It doesn't clear floats after it."
2) 清除浮動的方式有不少,不過最常見,也是最優化的一種就是使用偽元素:
Parent :after{
clear:both;
display:block;
content:"";
}