7. CSS 的 浮動

浮動

• 文字環繞圖片
  imag{float: left;}

• 文字環繞文字
  使用偽元素選擇器選出第一個元素，然後加一個float屬性

浮動特點：

• 元素浮動之後脫離了原規則
• 浮動之後，寬與高預設被內容撐開，可以自己設定
• 浮動後與其他元素共用一行，按照 3D 角度想，浮動的元素是飄起來的
• 浮動的元素可以設定margin，不用關心margin塌陷問題
• 不會像行內塊一樣當做文字處理，沒有行內塊的空白問題

浮動產生的影響

• 對兄弟元素的影響：後面的兄弟元素，會佔據浮動元素之前的位置，在浮動元素下面；對前面的兄弟元素沒有影響
• 對元素的影響：不能稱其父親元素的高度，導致父元素高度塌陷，但是父元素的寬度依舊束縛浮動的元素

解決浮動產生的所有影響

• 當元素沒有浮動且是非行內元素：新增屬性clear:left;消除所有左浮動兄弟所產生的影響，clear:both;消除所有浮動兄弟所產生的影響
• 當元素也是浮動元素，最後一個塊元素給出樣式為：clear:both;，設定偽元素

.父元素class::after{
  content:'';
  display: block;
  clear:both;
}

解決浮動產生父元素高度的影響

• 給父元素指定高度
• 給父元素也設定浮動，會給兄弟帶來影響
• 給父元素設定overflow: hidden;

ps：佈局原則：設定浮動，兄弟元素要麼全都浮動，要麼全部浮動