CSS基礎(float屬性與清除浮動)

2022-08-26 04:54:07 字數 1018 閱讀 3496

3.8

這是css裡比較重要的屬性:浮動,這個屬性會在以後經常用到,算是乙個重點吧

語法:float:left  |  right  |  none

特點:浮動的元素不佔位置,脫離了標準文件流(頁面中標籤的預設顯示方式就是標準流)

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

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

浮動的元素頂端對齊

預設情況下,子元素浮動只會在父元素的區域之內(除非你刻意用margin把子元素弄出去)

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

浮動前面有標準流,會漂浮到標準流的後面

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

利用浮動可以實現:

製作網頁導航(塊級元素在一行上顯示)

製作網頁左右布局(塊級元素在一行上顯示)

***:當所有的子元素都設定了浮動之後,不佔據位置,從而導致父元素沒有高度,這時候就需要清除浮動。

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

方式:直接給父元素設定高度

給父元素設定overflow:hidden     (這裡面涉及到bfc)

使用clear:left  |  right  |  both

clear:可以認為設定了clear屬性的元素,不能被浮動的元素覆蓋

left:不允許左邊有浮動元素

right:不允許右邊有浮動元素

both:兩邊都不允許

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

給父元素新增乙個子元素 div ,放在最後面,設定clear:both;

使用單偽元素清除浮動(這個方法是必須掌握的)

.clearfix:after

overflow的用法:

overflow:visible   預設值超出部分可見

overflow:hidden  將超出部分隱藏

overflow:scroll    新增滾動條

overflow:auto     自動設定滾動條

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

CSS清除浮動(Float)

我們換一種方法表達上面的意思,因為紅色方塊的 左側浮動 才導致藍色方塊上移至紅色方塊的尾後 在上個例子中,為了達到瀏覽器相容性,我們分別在紅色藍色方塊css 中分別加了 float left 這樣ie和ff中顯示效果一樣,如果此時我們還想放乙個寬度400畫素,高度100的綠色方塊,並讓其處於第二行,...

css清除浮動float

css清除浮動float 1.分析html 123 分析css 樣式 outer.div1.div2.div3分析問題 外層未設定高度,如果裡面元素不設定float的話,外層容器的高度會隨內層元素高度撐開,因為設定float之後內層元素脫離文件流,導致高度無法撐開 1 背景不能顯示 2 邊框不能撐開...

CSS清除浮動 清除float浮動

css清除浮動方法集合 一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不...