CSS浮动及清除方法-优快云博客

本文链接：https://blog.youkuaiyun.com/hhthwx/article/details/79503445

浮动原理：浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中普通流（文档流），即脱离了文档流，当一个元素浮动以后，不会影响到块级框布局只会影响内联框（通常是文本）的排列，文档中的普通流就会表现的和浮动框不存在一样，当浮动框的高度超出包含框时，就会出现包含框不会自动伸高来闭合浮动元素（”高度坍塌”现象）。就是漂浮在普通流上，就像浮云一样，但是只能左右浮动。正是因为浮动的这种特性，导致本属于普通流中的元素浮动以后，包含框内部由于不存在其他其他普通元素了，就表现为高度为0（高度塌陷）。在实际中，这并不是我们想看到的，所以我们需要闭合浮动元素，使其包含框表现出正常高度。

方法1：在父级元素上定义高度
比如：

<style>
   .div1{background: #000080;border:1px solid red;height: 200px}
   .div2{background: #800080;border:1px solid red;height: 100px;margin-top: 10px}
   .left{float:left;width: 20%;height: 200px;background: #DDD}
   .right{float:right;width: 30%;height: 80px;background: #DDD}
</style>
<body>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>

父级div手动定义height，就解决了父级div无法获取到高度的问题
优点：代码少，简单，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级的div不一样时，会产生问题

方法2：在结尾处加空div标签 clear:both

<style>
   .div1{background: #000080;border:1px solid red;}
    .div2{background: #800080;border:1px solid red;height: 100px;margin-top: 10px}
    .left{float:left;width: 20%;height: 200px;background: #DDD}
    .right{float:right;width: 30%;height: 80px;background: #DDD}
    .clearfloat{clear: both}
</style>
<body>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>
<div class="div2">
    div2
</div>

原理：添加一个空的div，利用CSS提高clear:both;清除浮动，让父级div能自动获取到高度
优点：代码少，简单，浏览器支持好，不容易出现怪问题
缺点：如果页面浮动布局多，就要增加很多空div

方法3：父级div定义伪类：after和zoom

<style>
   .div1{background: #000080;border:1px solid red;}
   .div2{background: #800080;border:1px solid red;height: 100px;margin-top: 10px}
   .left{float:left;width: 20%;height: 200px;background: #DDD}
   .right{float:right;width: 30%;height: 80px;background: #DDD}
   .clearfloat:after{display: block;clear:both;content: "";height: 0}
   .clearfloat{zoom:1}
</style>
<body>
<div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right clearfloat">Right</div>
</div>
<div class="div2">
    div2
</div>

原理：IE8以上和非IE浏览器才支持:after,原理和方法2有点类似，zoom（IE专有属性）可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出现怪问题
缺点：代码多，很多初学者不太懂原理，要两句代码结合才能使主流浏览器都支持

方法4：父级div定义overflow:hidden

<style>
   .div1{background: #000080;border:1px solid red;overflow: hidden;width: 98%}
   .div2{background: #800080;border:1px solid red;height: 100px;margin-top: 10px}
   .left{float:left;width: 20%;height: 200px;background: #DDD}
   .right{float:right;width: 30%;height: 80px;background: #DDD}

</style>
<body>
<div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right clearfloat">Right</div>
</div>
<div class="div2">
    div2
</div>

原理：必须要定义width或zoom:1;同时不能定义height,使用overflow:hidden时，浏览器会自动检查浮动区域的高度。
优点：简单，代码少，浏览器支持好
缺点：不能和position结合使用，因为超出的部分会被隐藏

方法5：父级div定义overflow:auto

<style>
   .div1{background: #000080;border:1px solid red;overflow: auto;width:98%}
   .div2{background: #800080;border:1px solid red;height: 100px;margin-top: 10px}
   .left{float:left;width: 20%;height: 200px;background: #DDD}
   .right{float:right;width: 30%;height: 80px;background: #DDD}

</style>
<body>
<div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right clearfloat">Right</div>
</div>
<div class="div2">
    div2
</div>

原理：必须定义width或zoom为1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：代码少，简单，浏览器支持好
缺点：内部宽度超过父级div时，会出现滚动条

方法6：父级元素div也一起浮动

<style>
   .div1{background: #000080;border:1px solid red;width:98%;margin-bottom: 10px;float:left}
   .div2{background: #800080;border:1px solid red;height: 100px;margin-top: 10px;clear:both}
   .left{float:left;width: 20%;height: 200px;background: #DDD}
   .right{float:right;width: 30%;height: 80px;background: #DDD}

</style>
<body>
<div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right clearfloat">Right</div>
</div>
<div class="div2">
    div2
</div>