浮動是CSS布局中的一個重要概念，它可以讓元素脫離標準文檔流，并且可以讓其他元素環(huán)繞在其周圍。通常情況下，浮動用于創(chuàng)建多列布局或者圖像與文字混排的效果。比如，我們可以使用浮動來實現(xiàn)一個左側導航欄、右側主體內(nèi)容的頁面布局。

浮動的工作原理很簡單。當一個元素設置為浮動后，它會嘗試盡可能地向左或者向右移動，直到遇到包含它的容器邊界或者其他浮動元素。同時，其他未設置浮動的元素會忽略浮動元素的位置，繼續(xù)按照標準文檔流排列。

清除浮動有多種方法，其中比較常見的兩種是：

1. 使用clear屬性：在浮動元素的下方添加一個空元素，并給這個元素設置clear屬性。clear屬性有l(wèi)eft、right、both三個值，分別表示清除左浮動、右浮動以及兩者都清除。例如：

<div?style="clear:both;"></div>

1. 使用overflow屬性：將浮動元素的容器元素設置為一個塊級元素，并給它設置overflow屬性。這樣可以強制容器元素包含浮動元素，并且不會出現(xiàn)溢出的情況。例如：

<div?style="overflow:auto;">
??<div?style="float:left;">浮動元素</div>
</div>

1. 使用after偽元素：在浮動元素的容器元素上添加一個clearfix類，并在CSS中定義clearfix類的樣式，使用after偽元素清除浮動。例如：

.clearfix:after?{
??content:?".";
??display:?block;
??height:?0;
??clear:?both;
??visibility:?hidden;
}
.clearfix?{
??zoom:?1;?/*?IE6/7?*/
}
<div?class="clearfix">
??<div?style="float:left;">浮動元素</div>
</div>

1. 使用display屬性：將浮動元素的容器元素設置為table、table-cell或者flex等具有彈性布局的屬性。這種方法需要考慮兼容性和語義化的問題。例如：

<div?style="display:?table;">
??<div?style="display:?table-cell;?vertical-align:?top;">
????<div?style="float:left;">浮動元素</div>
??</div>
</div>

1. 使用inline-block屬性：將父元素設置為display:inline-block，子元素再設置float:left等浮動屬性。這種方式也可以實現(xiàn)多列布局。

<div?style="display:?inline-block;">
??<div?style="float:?left;">浮動元素1</div>
??<div?style="float:?left;">浮動元素2</div>
??<div?style="float:?left;">浮動元素3</div>
</div>

1. 使用BFC（塊級格式化上下文）：在父元素上觸發(fā)BFC可以清除浮動，具體方式有多種，如給父元素設置overflow:hidden、position:absolute、display:table等屬性都可以觸發(fā)BFC。

<div?style="overflow:?hidden;">
??<div?style="float:?left;">浮動元素</div>
</div>

還有一個比較新的方法是使用CSS Grid布局中的grid屬性?？梢詫⒆釉卦O置為grid-column-start和grid-column-end等屬性，然后在父元素上設置display: grid即可實現(xiàn)清除浮動。

<div?style="display:?grid;">
??<div?style="grid-column-start:?1;?grid-column-end:?2;">浮動元素1</div>
??<div?style="grid-column-start:?2;?grid-column-end:?3;">浮動元素2</div>
??<div?style="grid-column-start:?3;?grid-column-end:?4;">浮動元素3</div>
</div>

1. 使用flex布局：將父元素設置為display:flex，子元素再設置float:left等浮動屬性。這種方式也可以實現(xiàn)多列布局。

<div?style="display:?flex;">
??<div?style="float:?left;">浮動元素1</div>
??<div?style="float:?left;">浮動元素2</div>
??<div?style="float:?left;">浮動元素3</div>
</div>

1. 使用網(wǎng)格布局（Grid Layout）：將父元素設置為display:grid，子元素再設置grid-column-start和grid-column-end等屬性。這種方式可以實現(xiàn)更復雜的多列布局。

<div?style="display:?grid;">
??<div?style="grid-column-start:?1;?grid-column-end:?2;">浮動元素1</div>
??<div?style="grid-column-start:?2;?grid-column-end:?3;">浮動元素2</div>
??<div?style="grid-column-start:?3;?grid-column-end:?4;">浮動元素3</div>
</div>

還有一種比較特殊的方法是使用偽元素:before和:after，將它們添加到包含浮動元素的容器中，并給它們設置clear:both屬性。這樣就可以清除浮動并且不需要在HTML中添加多余的元素。

.container:after?{
??content:?"";
??display:?table;
??clear:?both;
}

還有一種比較新的方法是使用CSS變量（CSS Variables）來清除浮動。我們可以在包含浮動元素的容器中添加一個::after偽元素，并且將這個偽元素的高度設置為0，然后利用CSS變量將容器的高度賦值給偽元素的高度，從而達到清除浮動的效果。例如：

.container::after?{
??content:?'';
??display:?block;
??height:?0;
??clear:?both;
??--height:?calc(100%?+?1px);?/*?設置CSS變量?*/
??height:?var(--height);?/*?使用CSS變量?*/
}

這種方法的好處是能夠動態(tài)地計算容器的高度，因此在響應式布局中更加靈活。但是需要注意的是CSS變量的兼容性問題，目前還不是所有的瀏覽器都支持CSS變量。

還有一種比較傳統(tǒng)的方法是使用JavaScript來清除浮動。我們可以在包含浮動元素的容器中添加一個空的div元素，并且給這個元素設置clear:both屬性，然后通過JavaScript來計算出容器的實際高度，將這個高度賦值給空的div元素。例如：

<div?class="container">
??<div?class="float-left">浮動元素1</div>
??<div?class="float-left">浮動元素2</div>
??<div?class="float-left">浮動元素3</div>
??<div?class="clear-float"></div>
</div>

<script>
??var?container?=?document.querySelector('.container');
??var?clearFloat?=?document.querySelector('.clear-float');
??clearFloat.style.height?=?container.offsetHeight?+?'px';
</script>

這種方法的好處是能夠解決一些兼容性問題，但是需要注意的是如果網(wǎng)頁中存在大量浮動元素，使用JavaScript來清除浮動可能會對性能產(chǎn)生影響。

還有一種比較特殊的情況，即使用flexbox布局時，浮動元素會自動清除。這是因為在flex容器中，子元素會默認設置為flex-item，而不是常規(guī)文檔流中的block元素。因此，浮動元素不會對flex容器中其他元素的布局產(chǎn)生影響。

.flex-container?{
??display:?flex;
}

.flex-item?{
??float:?left;?/*?浮動元素?*/
}

還有一種比較特殊的情況，即在CSS Grid布局中，浮動元素同樣會被自動清除。這是因為在Grid容器中，子元素默認設置為grid-item，而不是常規(guī)文檔流中的塊級元素。因此，浮動元素不會對Grid容器中其他元素的布局產(chǎn)生影響。

.grid-container?{
??display:?grid;
}

.grid-item?{
??float:?left;?/*?浮動元素?*/
}

還有一種比較簡單的清除浮動方法是使用CSS Flexbox布局。我們可以將浮動元素的父元素設置為display: flex，并且將子元素設置為flex屬性即可實現(xiàn)清除浮動的效果。

.parent?{
??display:?flex;?/*?將父元素設置為Flex容器?*/
}

.child?{
??flex:?1;?/*?將子元素設置為Flex項?*/
??float:?left;?/*?浮動元素?*/
}

浮動（Float）

浮動是 CSS 中用于實現(xiàn)元素水平布局的一種方式。通過 float 屬性，可以使一個元素脫離正常的文檔流，沿其容器的左側或右側邊緣排列。浮動通常用于實現(xiàn)文本環(huán)繞圖片、創(chuàng)建多列布局等效果。

工作原理

當一個元素應用 float 屬性后，它會沿其父容器的左側或右側邊緣浮動。其他非浮動元素將不會覆蓋浮動元素，而是環(huán)繞它。同時，浮動元素里面的文本和內(nèi)聯(lián)元素也會環(huán)繞浮動元素。需要注意的是，浮動元素只會影響其后的同級元素。

舉個例子，你可以為一個圖片元素設置 float: left，這會使圖片沿父容器左側浮動，同時后面的文本會環(huán)繞這個圖片。

清除浮動（Clear Float）

當一個元素浮動后，它會脫離正常文檔流，可能導致父容器高度塌陷等布局問題。為了解決這個問題，我們需要清除浮動。有以下幾種常用的清除浮動方法：

1. 使用 clear 屬性：你可以在一個元素上應用 clear: both、clear: left 或 clear: right。這會使該元素不允許出現(xiàn)在浮動元素的旁邊，從而實現(xiàn)清除浮動的效果。

2. 使用偽元素：這是一種常用的自動清除浮動的方法。通過為父容器添加一個 ::after 偽元素，并設置 content、display 和 clear 屬性，可以實現(xiàn)自動清除浮動。

   .clearfix::after?{
   ??content:?"";
   ??display:?table;
   ??clear:?both;
   }

   然后，為需要清除浮動的父容器添加 clearfix 類即可。

3. 使用 overflow 屬性：為父容器設置 overflow: auto 或 overflow: hidden 也可以實現(xiàn)清除浮動。這種方法有時可能會導致其他布局問題，需要根據(jù)實際情況權衡。

4. 使用 display: flex 或 display: grid： 使用 Flexbox 或 Grid 布局的容器會自動清除浮動，因為這兩種布局方式不受子元素的浮動屬性影響。

倉庫地址：https://github.com/webVueBlog/WebGuideInterview文章來源地址http://www.zghlxwxcb.cn/news/detail-404810.html