css浮动与清除浮动

时间 2019-11-12

标签 css 浮动清除栏目 CSS 繁體版

原文原文链接

1、css浮动css

来源：html

浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现相似word中“图文混排”。wordpress

什么是css浮动：布局

浮动的框能够向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止。因为浮动框不在文档的普通流中，因此文档的普通流中的块框表现得就像浮动框不存在同样。（注：边框指的是内容content的外边界）测试

举例说明：spa

html代码：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="float.css">
</head>
<body>
<div class="container">
   图片不具备浮动属性时，图片会出如今文字后面。
   图片不具备浮动属性时，图片会出如今文字后面。
   图片不具备浮动属性时，图片会出如今文字后面。
   图片不具备浮动属性时，图片会出如今文字后面。
   图片不具备浮动属性时，图片会出如今文字后面。
   图片不具备浮动属性时，图片会出如今文字后面。
   <img  src="img/test.png">
</div>

<div class="container">
   图片具备浮动属性时，文字会环绕在图片周围。
   图片具备浮动属性时，文字会环绕在图片周围。
   图片具备浮动属性时，文字会环绕在图片周围。
   图片具备浮动属性时，文字会环绕在图片周围。
   图片具备浮动属性时，文字会环绕在图片周围。
   <img class="fl" src="img/test.png">
</div>
</body>
</html>

css代码：htm

.container{
    border:1px solid yellow;
    padding:20px;
    background-color:yellow;
    background-clip:content-box;//背景被裁剪到内容框。

}
.fl{
    float: left;
}

效果图：blog

没有给图片添加浮动属性时：图片

给图片添加浮动属性后：

2、浮动的包裹性与破坏性

浮动具备两方面的影响，包裹性和破坏性。关于这两个方面的影响，在张鑫旭大神的一篇技术博客中《CSS float浮动的深刻研究、详解及拓展》有详细讲解，连接见文末。包裹性就是指元素尺寸能够恰好容纳内容。破坏性是指元素浮动后可能致使的父元素高度塌陷。

博客节选：“一、文字之因此会环绕含有float属性的图片时由于浮动破坏了正常的line boxes。......二、在目前的CSS的世界中，全部的高度都是有两个CSS模型产生的，一个是box盒状模型，对应CSS为”height+padding+margin”，另一个是line box模型，对应样式为”line-height”。前者的height属性分为明显的height值和隐藏的height值，所谓隐藏的height值是指图片的高度，一旦载入一张图片，其内在的height值就会起做用，即便您看不到”height”这个词。然后者针对于文字等这类inline boxes的元素（图片也属于inline boxes，但其height比line-height做用更凶猛，故其inline boxes高度等于其自身高度，对line-height无反应），inline boxes的高度直接受line-height控制（改变line-height文字拉开或重叠就是这个缘由），而真正的高度表现则是由每行众多的inline boxes组成的line boxes（等于内部最高的inline box的高度），而这些line boxes的高度垂直堆叠造成了containing box的高度，也就是咱们见到的div或是p标签之类的高度了。因此，对于line box模型的元素而言，没有inline boxes，就没有高度了，而浮动却偏偏作了这么龌龊的事情，其直接将元素的inline boxes也破坏了，因而这些元素也就没有了高度。......三、浮动破坏了图片的inline box，产生了两个结果：一是图片没法与文字同行显示，脱离了其原来所在的line box链；二是没有了高度（无inline box -> 无line box -> 无高度）。而这些结果偏偏是文字环绕图片显示所必须的。”

3、清除浮动（形成的的影响）

方法一：

把<div style="clear:both;"></div>做为最后一个子元素放在父元素末尾。缺点：在html代码中多出没有意义的标签，不符合html标签语义化，不方便后期维护。

方法二：

给父元素添加属性overflow：hidden；或者overflow：auto；。经测试在ie7中，子元素浮动并不会致使父元素塌陷。缺点：可能会致使后代元素内容被裁剪。

方法三：

使父元素自己也浮动。缺点：会影响总体布局。

方法四：

给父元素增长after伪元素，给after伪元素增长属性clear：both；。这是目前为止最推荐使用的方法。

4、参考博客（感谢如下文章做者）：

一、博客园starof：http://www.cnblogs.com/starof/p/4608962.html。

二、张鑫旭.CSS float浮动的深刻研究、详解及拓展(一):http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/

三、张鑫旭.CSS float浮动的深刻研究、详解及拓展(二):http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/

四、张鑫旭.对overflow与zoom”清除浮动”的一些认识:http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/