CSS之浮動float，cssfloat

CSS之浮動float，cssfloat

參考：分享：CSS深入理解之float浮動

一：float設計初衷

即是為了實現文字環繞效果

包裹：BFC（塊級格式化上下文）

破壞：容器被破壞，父元素高度塌陷（標準，

二：清除浮動（帶來的影響）

1：方法一，在底部插入clear：both

clear:html block 水平元素底部

css after 虛擬元素

 

2：方法二，BFC/haylayout

3：clear與margin重疊

三：浮動與流體布局

盡量少用flaot實現磚頭布局，浮動用於流體布局

四：float相容性
css浮動float有什作用？

如果不定義浮動的話，各個div的內容在頁面上是由上向下排列的。
而如果某個div定義了float: left，那麼這個div就會出現在上層div下最靠左的位置，而與它同一等級，但列在它後面的div就會顯示在他的右側了。
同樣，如果定義了float:right，那麼這個div就會出現在上層div下最靠右的位置，而與它同等級，但列在它前面的div就會顯示在他的左側。

兩欄或多欄式頁面配置就會用到它。
 
CSS中的float浮動下落問題

給這三個DIV加一個父DIV，
並定義父DIV的寬度為三個DIV的總寬度之和，
這樣不管怎麼變都不會下落了
<div>
<div></div><div></div><div></div>
</div>