【避坑指“难”】谈谈float浮动你不知道的那些事

被误解的Float-是魔鬼还是情非得已

如何解决浮动让父元素高度塌陷的bug？

bug？？不是所有长得不顺眼的都是虫子！浮动使高度塌陷不是bug，而是标准！因为浮动的原本作用仅仅是为了实现文字环绕效果。

清除浮动-究竟是清除浮动还是清除浮动带来的影响？

清除浮动只是一种简称，更重要的是清除浮动带来的影响。

清除浮动一般有两大基本方法：

• 方法一：clear:both;
• 方法二：父元素BFC（IE8+） or haslayout（IE6/7）

这两个方法的差异在于：

第一种方法：好比在峡谷之间搭建了一条索道，两峡谷可以通行，也能与外界接触。

第二种方法：BFC好像形成了一个封闭的结构，保护里面的任何声明，都不会对外部产生任何影响。

方法一：clear通常的应用形式：

• HTML block水平元素底部走起 <div>...<div>
• CSS after伪元素底部生成 .clearfix:after{}

这两种方式都是有不足的：

• div元素法：很多裸露的div标签看上去很讨厌
• after伪元素：根本不认识IE6和IE7，很容易奔溃

方法二：BFC/haslayout通常声明：

• float:left/right
• position:absolute/fixed
• overflow:hidden/scroll(IE7+)
• display:inline-block/table-cell(IE8+)
• width/height/zoom:1/…(IE6/IE7)

BFC方法的不足：

• 无法“一方通行”，不是所有元素都浮动或所有元素绝对定位
• 你我相逢不相识，即兼容性问题，很多浏览器不认可zoom:1

Float的滥用-不在其职而谋其政

问世间砌砖头为何物，为何float可以用来砌砖头？

• 元素block块状化（砖头化）
• 破坏性的紧密排列特性（去空格化）

浮动的砌砖问题：

• 容错器糟糕，很容易出问题，比如错位和一些维护性问题
• 需要的尺寸是一直固定的，很难复用
• 在低版本IE下会有很多

Float与流体布局-我本流体布局生，无奈苦逼砌砖头

文字环绕的衍生-单侧固定（左侧固定+右侧自适应）

基本结构如下：

width+float
padding-left/margin-left

DOM与显示位置匹配的单侧固定布局（右侧固定+左侧自适应）

基本结构如下：

width:100%+float
padding-lefg/margin-left
width+float+margin负值

高级进化-智能自适应尺寸（左右都自适应）

基本结构如下：

float
display:tabel-cell (IE8+)
display:inline-block (IE7)

Float与兼容性-不同的老爸不同的命

IE6已死，有事烧纸

让IE7飙泪的浮动问题：

• 含clear的浮动元素包裹不正确的问题
• 浮动元素倒数2个莫名垂直间距问题
• 浮动元素最后一个字符重复问题
• 浮动元素楼梯排列问题
• 浮动元素和文本不在同一行的问题

最后

以上就是强健蜜蜂为你收集整理的【避坑指“难”】谈谈float浮动你不知道的那些事的全部内容，希望文章能够帮你解决【避坑指“难”】谈谈float浮动你不知道的那些事所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。