css清除浮動的原理介紹
- 王林轉載
- 2020-07-18 17:31:112488瀏覽
首先我們要知道clear:both是清除浮動的關鍵。
（建議教學：css快速入門）
clear是CSS中的定位屬性，規定元素的哪一側不允許其他浮動元素。那麼clear:both就是規定在左右兩側均不允許浮動元素。
clear屬性只能在區塊級元素上其作用，這就是清除浮動樣式中display:block的作用。
另外visibility: hidden;height: 0;只要content的值為空，寫不寫都無所謂。
那麼為什麼要清除浮動，最常見的是因為外層容器高度坍塌，程式碼示範：
<style>
.wrap {
width: 200px;
border: 1px solid #333;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.left {
float: left;
background: blue;
height: 100px;
width: 100px;
}
.right {
float: left;
background: red;
height: 50px;
width: 100px;
}
</style>
<body>
<div class='wrap'>
<div class="left"></div>
<div class="right"></div>
</div>
</body>為了顯示清楚一點，在.wrap:after 樣式中的content設定為content : 'after偽元素' ,此時如下圖所示。
接著在.wrap:after 樣式中加上clear:both,顯示after偽元素左右兩邊皆不允許浮動元素，沒辦法只好把after偽元素放在下面，此時如下圖所示。
順帶撐起了.wrap父元素的高度，這樣就相當清除了浮動了，解決了外層容器高度坍塌的問題。
那我們把.wrap:after 樣式中的content設定為content:' ',最後就如下圖所示。
以上是css清除浮動的原理介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：juejin.im。如有侵權，請聯絡admin@php.cn刪除
上一篇：css中偽類和偽元素有什麼差別下一篇：css中偽類和偽元素有什麼差別