【CSS】我理解的float

注：文本是《CSS權威指南》的學習筆記

文章目錄

定義

浮動float：比如浮動圖片，使周圍的文字包圍它

<img src="b4.jpg" style="float: left;" alt="b4">

浮動元素，會以某種方式將浮動元素從文檔的正常流中刪除，不過它還是會影響佈局。

一個元素浮動時，其他內容會環繞該元素。
浮動元素周圍的外邊距不會合並（水平向、垂直向）
float：none;用於防止元素浮動。
浮動元素的包含塊是其最近的塊級祖先元素。
浮動元素會生成一個塊級框，而不論這個元素本身是什麼。它會像塊級元素一樣表現。所以沒必要對浮動元素聲明display: block;

重疊時

行內框（如strong）與一個浮動元素重疊時，其邊框、背景、內容都在該浮動元素之上顯示。
塊框（如p）與一個浮動元素重疊時，邊框和背景在下面，但是內容在該浮動元素上面顯示。

img.sideline {float: left; margin: 10px -15px 10px 10px;}
   p.box {border: 1px solid gray; padding: 0.5em;}
   p.box strong {border: 3px double black; background: silver; padding: 2px;}
   h2#jump-up {margin-top: -15px;background: silver; }

<div>
    <img src="images/mao.jpg" class="sideline">
    <p class="box">This iparagrapf, , underremarkableThis iparagrapf, underremarkableThis iparagrapf, underremarkableunderremarkable in most ways, does contain<strong>bbbsbsjhdjh strongly contain text</strong>aaaaaa</p>
    <p> This is a second paragraph </p>
    <h2 id="jump-up">a heading!</h2>
</div>

清除浮動: clear

clear屬性 h2{clear：left;}

clear: both; 確保該元素不與任何浮動元素在同一行上。
clear: none; 允許兩邊有浮動元素，可以用來覆蓋其他樣式。
css1\css2增加清除元素的上外邊距。css2.1增加了一個清除區域，但是不改變外邊距。加的這個清除區域使得清除元素剛好位於浮動元素的下面。no separation
浮動元素底端和清除元素頂端之間如果需要有間隔，那麼設置浮動元素的margin-bottom

浮動規則

1、浮動元素的左（或右）外邊界不能超出其包含塊的左（或右）內邊界。

2、浮動元素的左（或右）外邊界必須是源文檔之前出現的左浮動（或右浮動）元素的右（左）外邊界，除非後出現浮動元素的頂端在先出現浮動元素的底端下面。（防止浮動元素彼此覆蓋

3、左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊；
一個右浮動元素的左外邊界不會在其左邊任何左浮動元素的右外邊界的右邊

4、一個浮動元素的頂端不會比其父元素的內頂端更高。如果一個浮動元素在兩個合併外邊距之間，放置這個浮動元素時就好像在兩個元素之間有一個塊級父元素。