Web前端基礎（五）：清浮動方法與優缺點，web前端
1、如何對待美工
- 對於靠譜美工，美工圖精確度約0px。
- 對於不靠譜的美工，要與產品經理溝通，並用郵件往來。
2、浮動對文檔的影響
- 浮動會導致當前元素脫離文檔流，此時會對父級產生影響；
- 子項目浮動，父級元素會出現高度為0的現象，這個現象叫做高度塌陷；
3、清浮動的方法：3.1 需要清浮動的情況：
- 子標籤浮動後，父標籤的高度無法被撐開，所以需要清浮動；
- 新加入的標籤，希望不受之前浮動元素的影響，則需要清浮動；
3.2 清浮動方法：
- 1、子項目浮動，父級元素也浮動；
- 2、給空標籤設定屬性clear: both;
不允許有浮動；例：
放在要清除的最末尾；
- 3、br標籤清浮動
為br標籤設定屬性——clear=”all” 即可
- 4、給父級標籤設定 overflow: hidden/ auto ;
- hidden：超出內容隱藏。
- auto：預設屬性，在需要時剪下內容並添加捲軸；超出時顯示捲軸。
- 5、after虛擬元素清浮動
原理：替代空標籤，相當於用一個高度寬度為0的塊代替空標籤
例：
4、清浮動方法優缺點辨析4.1 子項目浮動，父級元素也浮動
- 優點：不存在結構和語義化問題，代碼量少；
- 缺點：使得與父元素相鄰的元素的布局會受到影響。
4.2 空標籤設定屬性clear: both
- 優點：通俗易懂，容易掌握；
- 缺點：會添加大量無語義空標籤，結構與表現未分離，不利於維護。
4.3 給父級標籤設定 overflow: hidden/ auto
- 優點：不存在結構和語義化問題；
- 缺點：
- hidden——>內容增多時候容易造成不會自動換行，導致內容被隱藏，無法顯示需要溢出的元素。
- auto——>多個嵌套後，有些情形下會造成內容全選；IE中mouseover造成寬度改變時會出現最外層模組的捲軸。
4.4 after虛擬元素清浮動
- 優點：結構和語義化完全正確；
- 缺點：複用方式不當會造成代碼量增加。
4.5 br標籤清浮動
- 優點：比空標籤方式語義稍強，代碼量較少；
- 缺點：結構與表現未分離。
查看評論
