CSS基礎（float屬性與清除浮動）

3.8

這是CSS里比較重要的屬性：浮動，這個屬性會在以后經常用到，算是一個重點吧

浮動

語法：float：left  |  right  |  none

特點：

浮動的元素不占位置，脫離了標准文檔流（頁面中標簽的默認顯示方式就是標准流）

浮動的元素可以實現元素的模式互換

同方向浮動的元素會順次排列

浮動的元素頂端對齊

默認情況下，子元素浮動只會在父元素的區域之內（除非你刻意用margin把子元素弄出去）

父元素浮動會把子元素一起帶跑

浮動前面有標准流，會漂浮到標准流的后面

值得注意的是：文字不會受浮動影響

利用浮動可以實現：

制作網頁導航（塊級元素在一行上顯示）

制作網頁左右布局（塊級元素在一行上顯示）

副作用：當所有的子元素都設置了浮動之后，不占據位置，從而導致父元素沒有高度，這時候就需要清除浮動。

清除浮動就是消除浮動的影響

 

方式：

1. 直接給父元素設置高度
2. 給父元素設置overflow：hidden     （這里面涉及到BFC）
3. 使用clear：left  |  right  |  both

Clear：可以認為設置了clear屬性的元素，不能被浮動的元素覆蓋

Left：不允許左邊有浮動元素

Right：不允許右邊有浮動元素

Both：兩邊都不允許

用clear 屬性清除浮動得到的效果不會涉及到別的元素，只對當前設置元素生效

給父元素添加一個子元素 div ，放在最后面，設置clear：both；

1. 使用單偽元素清除浮動（這個方法是必須掌握的）

   .clearfix:after{ Content：””;(這個屬性必須有) Clear:both; Display:block; Visibility:hidden; Height:0; Line-height:0;     }

    

 

Overflow的用法：

Overflow：visible   默認值超出部分可見

Overflow：hidden  將超出部分隱藏

Overflow：scroll    添加滾動條

Overflow：auto     自動設置滾動條

 

 

先這樣吧，大家婦女節快樂