-
Float與兼容性
查看全部 -
Float與流體布局
查看全部 -
float浮動的濫用
查看全部 -
清除浮動
查看全部 -
被誤解的float浮動
查看全部 -
float歷史float歷史
查看全部 -
float與流體布局
查看全部 -
浮動的特性
不足：容易出問題；需要元素固定尺寸；低版本IE不適用
查看全部 -
清除浮動
提供通道，與外部接觸，例如可以發生button重疊效果
形成封閉結構，不對外部產生任何影響
不兼容
偽元素：
不可濫用清除浮動查看全部 -
float的初衷：文字環繞效果
查看全部 -
查看全部 -
【CSS】【清除浮動(帶來的影響)】
方法一：在底部插入clear:both
1.HTML block水平元素放置于底部 <div ...></div>
2.CSS after偽元素在底部生成 .clearfix:after{}
方法二：父元素BFC(IE8+)或haslayout(IE6/IE7)
float:left/right
position:absolute/fixed
overflow:hidden/scroll(IE7+)
display:inline-block/table-cell(IE8+)
width/height/zoom:1/...(IE7/IE7)
★由于以上兩個方法各有缺點所以：
權衡后的策咯
.clearfix:after{content:''; display:block; height:0; overflow:hidden; clear:both;}(IE8+)
.clearfix{*zoom:1;} (IE6/IE7)
或
.fix:after{}
.fix{}
★更好的方法：
.clearfix:after{content:''; display:table; clear:both;}(IE8+)
.clearfix{*zoom:1;} (IE6/IE7)
★切勿濫用
.clearfix只應用在包含浮動子元素的『父級元素』上查看全部 -
1.浮動具有破壞性，會讓父元素高度塌陷
查看全部 -
display：table； display：table-cell； display：table-row； ps：不能與float一起使用。查看全部
-
大薩達撒大聲地
查看全部 -
清除浮動帶來的影響 應用在浮動元素的父級元素上 慎用
.clearfix:after?{ ??content:?""; ??display:?table; ??clear:?both; }查看全部 -
破壞性 父容器塌陷
查看全部 -
包裹的知識。
查看全部 -
這里，關于右浮動帶來的ie7兼容問題的解決方法
①不改變dom，給“左側”套上元素標簽，并左浮動，形成左右浮動
<div>
<span >左側</span>
<span >右側</span>
</div>
②改變dom位置，也就是將右浮動的元素放到前面：
<div>
<span >右側</span>
左側
</div>查看全部 -
智能能自適應
float: display:table-cell ? ? ?IE8+ display:inline-block ? ?IE7
查看全部 -
float仍會占據其位置，position會覆蓋文檔流中的其他元素。
/*偽元素是行內元素 正常瀏覽器清除浮動方法*/? ??
? ?.clearfix:after{? ? content: ""; ? ? ?
??display: block; ? ??
? ?height: 0; ??
? ? ?clear:both; ? ??
? ?visibility: hidden; ? ?} ??
/*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/? ??
?.clearfix{ ? ? ? ?*zoom: 1;}
查看全部 -
清浮動——清除浮動帶來的影響
1、底部插入clear:both;
與外部可直接接觸，可使margin發生重疊效果? ??
2、父元素BFC（IE8+）或haslayout（IE6/7)
形成一個封閉的結構，保護里面的任何聲明對外部產生影響。因此margin不會發生重疊
3、權衡之策
.clearfix切勿濫用，只能用于包含浮動子元素的父級元素上?
查看全部 -
float特性-包裹與破壞
浮動是魔鬼，無寬度、無圖片、無舞動一、包裹
包裹
堅挺
隔絕（BFC，block?formatting?content，塊級格式化上下文）
二、破壞（容器遭到破壞）
查看全部 -
學習的浮動的做好用以及如何運用
查看全部 -
左右浮動文字居中
查看全部 -
浮動“磚頭化”和“去空格化”
查看全部 -
.clearfix應用在包含浮動子元素的父級元素上
查看全部 -
解決高度塌陷更好的方法
查看全部 -
clear通常應用形式
查看全部
舉報