css浮動、浮動存在的問題、清除浮動

浮動

• 作用：用來解決圖檔和文字排版問題
• 原理：浮動的框向左或右移動 直到它的邊緣碰到包含框或另一個浮動框為止
• 特點

1. 脫離文檔流
2. 浮動元素會自動生成一個塊級框 而不論其本身是何種元素
3. 浮動會使行内元素轉化為塊元素 其寬高屬性起作用
4. fixed,absolute和float同樣是脫離文檔流但是前者不影響其他元素的正常布局，但float會影響其他元素布局，其他元素會圍繞float元素

浮動存在的問題以及如何清除浮動

對父元素造成的影響

若父級元素沒有設定高度 則父級元素高度無法被撐開，

内邊距和外邊距的值不能正确表達

影響與父元素同級的元素布局

①  對父級設定合适的高度值 但需要提前計算好内容高度 不适用于高度不固定的父标

②  給父級元素加overflow: hidden樣式   觸發BFC方式，實作清除浮動

• 原理：普通流根據内容高度裁切隐藏 如果高度未設定，會先對内容全部高度進行計算，包括浮動的高度，達到清除浮動
• 缺點 ：如果設定了外邊距為負值會導緻元素會被裁剪掉

③  在父元素同級的下一個元素，若為塊級元素直接添加clear屬性，否則新加一個style="clear:both;"空标簽

④  代替建立一個新标簽的解決方法     使利用僞元素::after對僞元素設定clear屬性

.parent::after{

  content:" "; // 必須要設定content,不設定的話，該僞元素無效，如果不需要僞元素有内容，可以設定content: ""。

  height:0; //height必須設定為0 否則會導緻元素比實際高 也可不設定 預設就是0

   display:block; // clear隻對塊級元素有效 且 :after僞元素的預設類型是内聯元素

   clear:both; // 清除浮動

}

對同級元素的影響

與浮動元素同級的元素會跟在其後 圍繞浮動元素 影響正常布局

利用clear屬性的三種方式 已有标簽(塊級元素) 新的空标簽(塊級元素)  僞元素::after

①如果浮動元素剛好有一塊級元素(行内、行内塊設定無效)，對該元素設定style="clear:both;"，可以不用建立新的标簽

②如果無則可以在浮動元素後添加一style="clear:both;"空标簽 ，但浪費了一個空标簽 複用性差

③利用僞元素::after的特性搭配clear屬性清除浮動

如果在父元素後使用style="clear:both;"，在父元素内float元素同級的元素布局仍受浮動的影響，即設定clear後的元素不再受浮動元素的影響,是以盡量在浮動元素後進行清新浮動