在元素設定浮動（float）后，該元素就會脫離檔案流，并且向左或向右浮動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣，
一、浮動元素對布局的影響
1.1、浮動元素造成父元素的高度塌陷：
原來的父元素高度是內部元素撐開的，但是當內部元素浮動后，脫離檔案流浮動起來，那父元素的高度就坍塌，變為高度 0px，
<style>
.container {
border: 1px solid blue;
}
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: red;
float: left;
}
</style>
<div >
<div ></div>
<div ></div>
<div ></div>
</div>上述代碼中 container 元素的高度將會是 0px，
1.2、浮動元素對鄰近非浮動元素造成影響：
<style>
.container {
border: 1px solid blue;
}
.box0 {
width: 100px;
height: 100px;
margin: 10px;
background-color: red;
float: left;
}
.box1 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div> 上述代碼中 box1 的位置受到前面元素浮動的影響，而且不管 box1 是在 container 里面還是外面都會受到影響，
二、清除浮動（解決浮動元素影響鄰近非浮動元素問題）
CSS 清除浮動是指在使用浮動布局時，解決浮動元素對非浮動元素的影響的問題，
當元素設定為浮動時，它會從檔案流中“漂浮”出來，不再占據原來的空間，導致后面的元素不能正確地換行顯示，為了解決這個問題，需要使用清除浮動的方法，
常見的清除浮動方法有以下幾種：
1、在浮動元素后添加一個空的容器，并給該容器設定 clear 屬性：
<div style="position: relative;">
<div style="float: left;">...</div>
<div style="float: left;">...</div>
<div style="clear: both;"></div>
</div>2、給父元素設定 overflow 屬性：
<div style="overflow: hidden;">...</div>3、使用偽元素：
.clearfix::after {
content: "";
display: table;
clear: both;
}將以上代碼添加到需要清除浮動的元素的 CSS 中，并在 HTML 中將該元素的 class 設定為 clearfix，這樣，就可以通過使用偽元素清除浮動了，
4、使用 CSS flex 布局：
在使用 CSS flex 布局時，父元素默認會包含所有的子元素，因此不需要進行清除浮動，
<div style="display: flex;">
<div style="float: left;">...</div>
<div style="float: left;">...</div>
</div>5、使用 CSS grid 布局：
在使用 CSS grid 布局時，父元素默認會包含所有的子元素，因此不需要進行清除浮動，
<div style="display: grid;">
<div style="float: left;">...</div>
<div style="float: left;">...</div>
</div>上是 CSS 清除浮動的常見方法，需要根據具體的使用場景和需求來選擇最適合的方法，
三、解決浮動元素造成父元素高度塌陷問題
在開發程序中，有時需要解決浮動元素對父元素高度的影響，這時也可以使用以下方法解決：
1、使用絕對定位：
通過將浮動元素設定為絕對定位，可以避免浮動元素對父元素高度的影響，
<div style="position: relative;">
<div style="position: absolute;">...</div>
<div style="position: absolute;">...</div>
</div>2、使用 table 布局：
通過將父元素設定為表格布局，可以避免浮動元素對父元素高度的影響，
<div style="display: table;">
<div style="display: table-cell;">...</div>
<div style="display: table-cell;">...</div>
</div>這些方法可以幫助解決浮動元素對父元素高度的影響問題，但是需要根據具體的使用場景和需求來選擇最適合的方法，
作者：yuzhihui
出處：http://www.cnblogs.com/yuzhihui/ 宣告：歡迎任何形式的轉載，但請務必注明出處！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/542906.html
標籤：Html/Css
下一篇：js函式中的this指向