CSS理解之Float

小胖

发布于 2018-06-27 07:59:31

75100

代码可运行

文章被收录于专栏：进击的君君的前端之路进击的君君的前端之路

运行总次数：0

代码可运行

1.Float的设计初衷仅仅是：

实现文字环绕效果，如下图所示：

Paste_Image.png

明白了float的设计初衷，就可以明白float特有的行为表现了。

我们都知道，使用float会产生一定的破坏性，如给子元素设置浮动会使父元素高度塌陷，其实这不是bug，而是为了实现文字环绕效果而产生的特性使然。

2.清除浮动的两大基本方法：

1.给受浮动影响的元素设置clear:both

2.使父元素形成BFC（IE8+，是高级浏览器特有的一个概念）或haslayout（IE6/IE7私有的概念）

两种方法的区别：

clear：与外界还有联系，例如会产生margin重叠的效果
BFC/haslayout（应用于父元素）:封闭，里面的声明不会对外界产生影响，例如float不会出现margin重叠，但也有缺陷，无法应用于所有浏览器

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>clear与margin重叠</title>
</head>

<body>
1.
<div style="background-color: #f5f5f5;">
    ![](http://upload-images.jianshu.io/upload_images/1969310-8b6611e56974ea20.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    <div style="clear:both; margin-bottom:100px;">clear:both;</div>
</div>
<div style="margin-top: 100px;">本文字离图片的距离是？</div>
<br><br><br><br>2.
<div style="background-color: #f5f5f5; overflow: hidden;">
    ![](http://upload-images.jianshu.io/upload_images/1969310-8b6611e56974ea20.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>
<div style="margin-top: 100px;">本文字离图片的距离是？</div>
</body>
</html>