清除浮动（解决高度坍塌的问题）的方法5种
高度坍塌的根源
常規流盒子的自動高度，在計算時，不會考慮浮動盒子
如果父盒子沒有給高度，但是里面的子元素浮動，或者絕對定位，固定定位，都會使這個子元素脫離文檔流，使父元素不能夠獲取元素的高，也就是不能自適應子元素的高了，既然不能自適應子元素的高了，那么父元素的高就是0，那么后面的元素自然 就跑上來了。
方法一：給浮動元素的父輩容器添加高度
缺點: 需要手動添加高度, 如何后面子元素的高度發生變化之后,還行再次修改父輩的高度, 給后期的維護帶來麻煩.
優點: 簡單粗暴直接有效
<style>*{padding:0;margin: 0;}.box1{width: 1700px;height: 100px;background-color: lightseagreen;}.box1>div{float: left;width: 200px;height: 100px;background-color: lightcoral;border: lightgreen solid 2px;}.box2{width: 100px;height: 100px;background-color: red;}</style> <body><div class="box1"><div></div><div></div><div></div><div></div></div><div class="box2"></div> </body>這種方法很簡單，就是浮動元素需要多少高度，就給它的父元素設置多少高度，雖然好使，但是不夠靈活。
方法二：使用清除屬性clear
清除浮動，涉及css屬性：clear
- 默認值：none
- left:清除左浮動,該元素必須出現在前面所有左浮動盒子的下方
- right:清除右浮動，該元素必須出現在前面所有右浮動盒子的下方
- both:清楚左右浮動，該元素必須出現在前面所有浮動盒子的下方
clear屬性的含義是避免前面的浮動元素對自己的影響. 所以, 誰不想讓別人影響自己, 就添加到誰身上.
<style>.contianer{background-color: deepskyblue;}.item{float: left;width: 50px;height: 50px;background-color: forestgreen;border: gold solid 1px;}.end{clear: both; /* 處理高度坍塌的問題*/}</style> <body> <div class="contianer"><div class="item"></div><div class="item"></div><div class="item"></div><div class="end"></div> </div> </body>這種方法的特點就是我們專門設置了一個空盒子來撐起父元素的高度
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
方法三：使用 after 偽元素清除浮動，給父元素添加 clearfix
給一個元素添加一個:after則相當于給這個元素添加了子元素, 而且這個子元素會是他的最后一個兒子.
該樣式在clearfix，即父級元素的最后，添加了一個:after偽元素，通過清除偽元素的浮動，達到撐起父元素高度的目的
。注意到該偽元素的display值為block，即，它是一個不可見的塊級元素（有的地方使用table，因為table也是一個塊級元素）。
<style>.contianer{background-color: deepskyblue;padding: 30px;}.item{width: 50px;height: 50px;background-color: forestgreen;border: gold solid 1px;float: left;}.clearfix::after{content: "";display: block; /*插入偽元素是行內元素，要轉化為塊級元素*/clear: both;}.clearfix{*zoom:1;} /* *只有IE6,7識別 */</style> <body> <div class="contianer clearfix"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div> </div> </body>
原理：after是在父元素中加一個盒子，這個元素是通過css添加上去的，符合閉合浮動思想，結構語義化正確。
父元素中加一個類名為clearfix 。但是這個方法IE6-IE7不識別，要進行兼容，使用zoom:1觸發hasLayout來清除浮動
方法四:給父級元素添加overflow：hidden，創建 bfc
<style>.box1{width: 200px;background-color: aqua;overflow: auto; /* 這里的auto可以是除了visible之外的其他值 */}.box1>div{float: left;width: 50px;height: 50px;background-color: brown;}footer{width: 200px; height: 100px;background-color: coral;clear: both;}.box2{width: 200px;height: 100px;background-color: chartreuse;} </style> <body><div class="box1"><div></div><div></div><div></div><footer></footer></div><div class="box2"></div> </body>僅僅只在父級元素上添加了一個值為auto的overflow屬性，父元素的高度立即被撐起，將浮動元素包裹在內?？雌饋?#xff0c;浮動被清除，浮動不再會影響到后續元素的渲染（嚴格講，這和清除浮動沒有一點關系，因為不存在哪個元素的浮動被清除）。
其實，這里的overflow值，還可以是除了"visible"之外的任何有效值，它們都能達到撐起父元素高度，清除浮動的目的。
當元素設置了overflow樣式，且值不為visible時，該元素就建構了一個BFC
按照BFC的特點，BFC的高度是要包括浮動元素的，所以父元素的高度被撐起來，達到了清除浮動影響的目的。
方法五：使用 before 和 after 雙偽元素清除浮動
<style>.box1{width: 300px;background: cyan;}.box1>div{width: 70px;height: 100px;background-color: yellow;float: left;}.clearfix{*zoom: 1;}.clearfix::before,.clearfix::after{content: '';display: block;clear: both;} </style> <body> <div class="box1 clearfix"><div></div><div></div><div></div> </div> </body>
這種方法完全符合閉合浮動思想。給父元素加一個類名為clearfix,需要兼容IE6-IE7
總結
以上是生活随笔為你收集整理的清除浮动（解决高度坍塌的问题）的方法5种的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在线文字转语音以及编辑的网址
- 下一篇： 活用西瓜书——sklearn包中的神经网