HTML清除浮動最優方式
阿新 • • 發佈：2019-01-11
原理：利用:after和:before來在元素內部插入兩個元素塊，從而達到清除浮動的效果。其實現原理類似於clear:both方法，只是區別在於:clear在html中插入一個div.clear標籤，而outer利用其偽類clear:after在元素內部增加一個類似於div.clear的效果。
.clearfloat { zoom: 1;/*為了相容性，因為ie6/7不能使用偽類，所以加上此行程式碼。*/ } .clearfloat:after { display: block;/*首先要顯示偽元素，所以display:block，*/ clear: both;/*要清除浮動，所以，clear:both。*/ content: "";/*content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內容。*/ visibility: hidden;/*作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現清除浮動。 */ height: 0;/*為使偽元素不影響頁面佈局，將偽元素高度設定為0*/ } .div1 { background: white; border: 1px solid red; } .div2 { background: #800080; border: 1px solid red; height: 100px; margin-top: 10px } .left { float: left; width: 20%; height: 200px; background: #DDD } .right { float: right; width: 30%; height: 80px; background: #DDD }
正文
<body>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2 clearfloat">
div2
</div>
</body>效果圖
