動元素添加了flow屬性，會被移出正常文檔流，并被拉到文檔的邊緣，文檔流重新排列并包圍它所在的空間。在報紙和雜志很常見，所以css增加了浮動來實現這種效果，這是浮動設計的初衷。

浮動本身并不是為了實現布局而設計的，但在近20年時間里被當成布局工具。是因為那個年代它是唯一的選擇，flexbox和網格布局近幾年才出現。

浮動元素不同于普通文檔流元素，它們的高度不會添加到父元素。容器折疊是指父容器并沒有包含到浮動的容器，因為浮動的元素高度不會加到父容器上。

如何解決容器折疊的問題

使用和浮動float配套的clear屬性。將一個元素放置到父容器的末尾，并對它使用clear: both，元素將移動到浮動元素的下面，而不是側面。容器就會擴展包含它。更加優雅的做法，是使用偽元素。這一做法稱為清除浮動。

.clear::after { // 選中容器末尾的偽元素

content: ' '

clear: both // 清除浮動

display: block // display非inline，clear只對塊級元素生效，加上content屬性，使得偽元素出現在文檔中

}

浮動元素的外邊距不會折疊到容器外，而非浮動元素外邊距則會折疊。為了包含所有外邊距，清除浮動修改版如下。

.clear::after,

.clear::before { // 選中容器開始和末尾的偽元素

content: ' '

display: table // table可以包含外邊距

}

.clear::after { // 只有末尾需要清除浮動

clear: both // 清除浮動

}

有一種典型網頁布局，左邊是圖片，右邊是文字，稱為媒體對象模式。實現方案有很多種，可以用flexbox和網格布局等，這里講下如何用浮動實現。

對圖片設置浮動到左邊，右邊文字會圍繞圖片，可能會到圖片的底下。但是我們預期是文字在圖片右側排列，不會到圖片底部。

使用塊級格式化上下文（block formatting context, BFC）解決。BFC里面的內容不會和外部元素重疊或相互影響。添加如下元素可以創建

●float: left, right，不為none即可

●overflow: auto, hidden, scroll，不為visible即可

●display: inline-block, table-cell, flex, grid。有這些屬性的元素是塊級容器

●position: absolute或fixed

通常采取設置overflow: hidden或auto，是創建BFC最簡單的方式。

以上就是今天和大家分享的浮動核心知識，希望能讓你更好的理解界面樣式。喜歡的朋友可以點贊，關注加收藏，互相學習，共同成長！