-
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通常应用形式
查看全部
举报