浮動元素詳解

2021-09-13 14:00:47 字數 697 閱讀 3381

1. 行內元素(包括文字、input、button等等)環繞浮動元素,這也是float設計之初的目的,可以實現文字環繞等效果

2. 較早時期用來進行頁面布局,現在有了inline-block、flex、grid等等更方便的方法

浮動元素會根據屬性值向左或向右浮動,浮動元素會脫離普通文件流,進入浮動流,浮動流內的浮動元素可以左右移動,直至外邊緣碰到包含塊或其他浮動元素,會使得塊級元素無視浮動元素且行內元素環繞浮動元素(了解過層疊上下文的同學就會知道浮動層實際介於塊級元素層和行內元素層之間)

下面我們來看看各種浮動情況下的效果,頁面元素、效果如下:

div2

clear:left/right/both

即不允許左/右兩邊有浮動元素,當前行上不會再又浮動元素(注意用於設定clear樣式的div不要設定float)

常用方式:

// 在需要清除浮動的元素的上側或下側新增div,並設定clear樣式

.clear

// 設定包含浮動元素的容器元素的偽元素

content: '';

display: block;

clear: both;

}// 設定父元素overflow: auto

// 將父元素也變為bfc

HTML CSS浮動元素詳解

浮動定位是指 1.1將元素排除在普通流之外,即元素將脫離標準文件流 1.2元素將不在頁面占用空間 1.3將浮動元素放置在包含框的左邊或者右邊 1.4浮動元素依舊位於包含框之內 2.浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止 經常使用它來實現特殊的定位效果 3.包含框...

父元素浮動子元素會浮動嗎 13浮動

1 浮動的定義 float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象,使文字圍繞在影象周圍,不過在 css 中,任何元素都可以浮動。浮動元素會生成乙個塊級框,而不論它本身是何種元素。css 的 float 浮動 使元素脫離文件流,按照指定的方向 左或右發生移動 直到它的外邊緣碰到包含框或...

元素浮動與清除浮動

我們知道,塊元素具有的特點是具有完整的盒模型和自己佔一行。當我們想讓多個塊元素同佔一行時,我們通常使用的方法除了利用display屬性之外,還可以利用float屬性,使其浮動,達到同佔一行的效果。float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象,使文字圍繞在影象周圍,不過在 css ...