-
?清楚浮動帶來的影響，浮動是一直存在的
一：腳底插入clear:both;（與外接觸）
二：父元素BFC（IE8+)或haslayout(IE6/IE7)(不與外界接觸）
clear通常應用形式
HTML block水平元素底部走起<div>...</div>
CSSafter偽元素底部生成 .clearfix:after{}
切勿濫用
.clearfix應用在包含浮動子元素的父級元素上
查看全部 -
浮動的破壞性只是單純為了實現文字環繞效果而已，因此，父容器高度塌陷根本不是BUG，特性使然
查看全部 -
float特性之包裹：
收縮
堅挺
隔絕（塊級格式化上下文BFC）
之破壞：容器被破壞
查看全部 -
清除浮動在父元素上添加:after{content:"";display:table-cell;clear:both;}
查看全部 -
class="float-left" 實現文字環繞，浮動的原本作用。
查看全部 -
浮動是為了實現文字的環繞效果，但是浮動會破壞父元素的高度，使父元素的高度塌陷，這才使得其他元素可以環繞在周圍
查看全部 -
設置float后會去掉空格，原因是float的文字環繞特性，換行符被當成了文字查看全部
-
IE7的問題查看全部
-
三無查看全部
-
?子元素使用浮動，會使父元素高度塌陷（浮動元素脫離原始文本流，不占空間，父級對象盒子無法撐開），就產生浮動的效果。
clearfix清楚浮動更好的方式 .clearfix:after{ content:''; display:table; clear:both; }
查看全部 -
浮動與流體布局：
查看全部 -
浮動與兩側自適應的流體布局
div1{float:left;margin-right:20px;}
div2{
display:table-cell;
width:400px;
}
查看全部 -
?子元素使用浮動，會使父元素高度塌陷（浮動元素脫離原始文本流，不占空間，父級對象盒子無法撐開），就產生浮動的效果。
浮動產生的副作用：
1、背景不能顯示（顏色、圖片）
2、邊框不能撐開
3、margin、padding不能顯示（特別是上下邊）
不清除浮動時的效果：
https://img1.sycdn.imooc.com//5c6e261b0001a71508750646.jpg
清除浮動的方法：
1.為父級元素設置確定的高（計算好內容高度）
2.clear:both清除浮動
3.父級div定義 overflow:hidden（對父級CSS選擇器加overflow:hidden樣式，可以清除父級內使用float產生浮動。優點是可以很少CSS代碼即可解決浮動產生。）
overflow:hidden屬性相當于是讓父級緊貼內容，這樣即可緊貼其對象內內容（包括使用float的div盒子），從而實現了清除浮動。
查看全部 -
具有破壞行：
display: none
position: absolute /fixed / sticky
查看全部 -
具有包裹性：
display: inline-block / table-cell
position: absolute / fixed /sticky
overflow: hidden /scroll
查看全部
舉報