浮動以及清除浮動 BFC CSS

2021-10-12 19:55:26 字數 737 閱讀 5657

float屬性指定乙個元素應沿其容器的左側或者右側放置,允許文字和內聯元素環繞它。

浮動定位常用於布局中。

浮動的特點:

脫標:脫離標準流

貼邊:會貼向父容器或其他浮動的側邊

字圍:文字和內聯元素會環繞浮動元素(即float的屬性值不為none的值)

收縮:塊級元素不再沾滿一整行,而是收縮至元素本身的寬度

浮動帶來的問題就是父容器高度塌陷,即浮動的子元素無法撐起父容器的高度,這時候我們就需要清除浮動

清除浮動的方法

為父容器新增偽元素,使用clear:both清除浮動

觸發父容器的bfc

根元素(html)

浮動元素(flaot不是none

絕對定位的元素(position屬性值為absolute或者fixed

行內塊元素(display屬性值為inline-block

**單元格

overflow不為visibleflex或者inline-flexgrid網格元素

CSS浮動以及清除浮動

傳統網頁布局的三種方式 本質 用css擺放盒子。實際開發中,乙個頁面基本都包含了這三種布局方式 1 普通流 標準流 文件流 最基本的布局方式 標籤按照規定好預設方式排列 浮動 float屬性用於建立浮動框,將其移動到一邊知道左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣。要想塊元素水平排列如果轉換成行...

CSS的浮動以及清除浮動

給元素新增了float屬性 float left,float right 可以讓元素進行橫向排列 做文字圍繞效果 因為文件流元素會忽視浮動元素的存在,但是文件流元素的文字卻不會。新增了float屬性後,該元素會脫離正常的文件流,所以會覆蓋其他的元素,父元素由於沒有被撐開,造成了高度塌陷。所以清除浮動...

浮動布局,以及如何清除浮動

主頁 主頁 冰山一樹sankey csdn主頁 csdn主頁 冰山一樹sankey 網頁布局的本質 用 css 來擺放盒子。把盒子擺放到相應位置.css 提供了三種傳統布局方式 簡單說,就是盒子如何進行排列順序 所謂的標準流 就是標籤按照規定好預設方式排列 行內元素會按照順序,從左到右順序排列,碰到...