浮動與清除浮動

浮動布局是一種常見的布局方式，最初的使用目的是進行**的混排

清除浮動

浮動的使用場景

浮動通過css定義：

#div1

當元素進行左浮動或者右浮動之後會脫離文件流，並且構成乙個浮動流，會覆蓋在沒有浮動的元素上，並且允許文字和內聯元素環繞在它周圍；浮動元素不會超出父元素的上、左、右邊界：

class

="parent"
>
class
="bro1"
>
第乙個沒有設定浮動的blockdiv
>
class
="bro2"
>
浮動block，寬度收縮div
>
class
="bro3"
>
被覆蓋block,文字被擠開div
通過這個例子我們可以看出，當元素設定為浮動元素的時候會產生下列影響：
當同乙個父元素下存在多個浮動的子元素的時候，這些子元素按照浮動流排布:
下面的例子中，.left表示左浮動，大小70px/40px；外邊距10px.right表示右浮動；大小100px/100px 外邊距10px
class

="parent"
>
父元素width：600px;
class
="bro1"
>
bro1不浮動的block元素div
(讀者可以寫乙個類似的demo來感受一下,改變parent元素的寬度會有很多不同的排列效果)
這一點主要是指，當子元素浮動的時候可能會發生父元素高度塌陷的情況
class
="parent"
>
class
="left"
>
浮動元素div
這個現象往往會造成不好的影響，我們需要通過清除浮動解決
浮動的清除有兩種主要方案：
clear屬性可以取值：none（預設）|left|right|both
分別表示：不清除浮動|清除左浮動|清除右浮動|全部清除
具體效果看例子：
class

="parent"
>
class
="left"
>
1div
>
class
="right"
>
2div
>
class
="bro"
>
div>
div>
.parent
.left
.right
.bro
接下來為bro設定clear屬性，表現如下

我們可以注意到：
由此我們得到一種避免父元素高度塌陷的方法——在末尾新增乙個清除浮動元素，除了可以新增實際的html標籤之外，我們也可以通過偽元素來解決，給父元素新增這樣乙個類：
.clear:after

bfc（塊級格式化上下文）

bfc究竟是什麼含義，讀者可以自行搜尋，或者在我左邊的文章列表裡找一找（希望你看到這裡時我更新了關於bfc的文章）
我們可以將浮動元素的父元素進行如下設定中的任意乙個：
我個人建議使用overflow:hidden;，相比於其他選擇，這個方法的***最小
 
浮動與清除浮動
left 元素向左浮動。right 元素向右浮動。none 預設值。元素不浮動，並會顯示在其在文字中出現的位置。浮動的特性 浮動元素會從普通文件流中脫離，但浮動元素影響的不僅是自己，它會影響周圍的元素對齊進行環繞。不管乙個元素是行內元素還是塊級元素，如果被設定了浮動，那浮動元素會生成乙個塊級框，可以...
浮動與清除浮動
為元素設定了浮動之後，元素就會脫離文件流 可以看做是漂浮在文件流之上 存在。所有產生了浮動流的元素，塊級元素看不到它們。產生了bfc的元素和文字類屬性 inline 的元素以及文字都能看到浮動元素。如何觸發乙個盒子的bfc？position absolute float left right dis...
浮動與清除浮動
浮動與清除浮動 也成了建立多欄布局最簡單的方式。文字內容段落內容文字內容段落內容文字內容段落內容文字內容段落內容文字內容段落內容 文字繞排 p img 建立多欄布局 p img 二 浮動元素脫離了文件流，其父元素也看不到他了，因為也不會包圍他，就會出現子元素有高度，而父元素不會被撐起，這時候並非我們...