CSS-定位5-清楚浮动

1、CSS浮动产生原因

一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。

2、CSS浮动影响

1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

3、清除浮动影响的方法

（1）使用clear属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动高度塌陷</title>
    <style type="text/css">
    *{
        margin:0px;
        padding: 0px;
    }
    .left{
        width: 100px;
        height: 100px;
        background: red;
        float: left;
    }
    .right{
        width: 100px;
        height: 100px;
        background: blue;
        float: right;
    }
    .wrap{
        background: gray;
        border: 1px solid yellow;
        width: 500px;
        margin:20px auto;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

运行效果：

清楚浮动前

使用clear:both 清楚浮动

  <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
        <div style="clear: both"></div>
    </div>

运行效果：

清楚浮动后

（2）使父元素BFC
给父wrap元素添加 overflow:hidden属性，使其产生BFC。运行效果与clear:both 效果相同。

最后编辑于：2017.12.08 04:28:16

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

CSS-定位5-清楚浮动