css清除浮动

作者: LYF闲闲闲闲 | 来源:发表于2017-08-01 13:13 被阅读18次

CSS浮动续
CSS clear both清除浮动
清除浮动
一篇文章带你了解CSS clear both清除浮动
CSS 中的浮动
CSS浮动.清除浮动
css浮动清除浮动
Test10
经常写却记不住的前端代码
css3复习

文档流：文档流是文档中可显示对象在排列时所占用的位置。
浮动：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

浮动产生的影响

浮动与元素超出包含框的时候，包含框不会自动伸高来闭合浮动元素，叫做高度塌陷。
如下所示：.main 和 .side 不会撑高父元素 .wrap 的高度

//  css代码
<style>
       .wrap { border: 2px solid gray ; width: 400px;}
       .main { float: left;width: 200px;height: 100px; background-color: pink;}
       .side { float: right;width: 150px;height: 100px;background-color: greenyellow;}
       .footer { width: 300px; height: 100px;  background-color: yellow; }
</style>

//  html代码
<div class="wrap" id="float1">
    <h2>浮动</h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side right">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

如何清除浮动

使用clear : left|right|both|none;
闭合浮动元素，减少浮动带来的影响

使用clear属性:

1.在浮动元素的后面添加`<div style="clear:both;"></div>`


<style>
    .wrap { border: 2px solid gray; width: 400px;}
    .main { float: left; width: 200px; height: 100px;background-color: pink;}
    .side { float: right;width: 150px; height: 100px; background-color: greenyellow;}
    .footer { width: 300px;height: 100px; background-color: yellow;}
</style>
<body>
<div class="wrap" id="float1">
    <h2>clear清除浮动</h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side right">.side{float:right;}</div>
    <div style="clear:both;"></div>
</div>
<div class="footer">.footer</div>

2.在浮动元素的后面添加`<br clear="all">`

将上一个例子中的<div style="clear:both;"></div>替换为<br clear="all">

父元素设置dispaly:table

在父元素的css中加入display:table，

.wrap{
        border: 2px solid gray;
        width: 400px;
        height: 100px;
        display: table;
    }

父元素设置overflow: hidden;

在父元素的css中加入overflow: hidden

.wrap{
        border: 2px solid gray;
        width: 400px;
        height: 100px;
        overflow: hidden;
    }

上面的例子中 .main 和 .side 中的一部分内容溢出被隐藏，修改的办法就是将height: 100px;去掉，让元素自己撑开父元素，或者是把height的值设大一点，让元素不溢出就好了。

 .wrap {
        border: 2px solid gray;
        width: 400px;
        overflow: hidden;
    }

还可以设置overflow: auto;

添加:after伪元素

给父元素添加伪元素

     .wrap:after{
            content:".";
            display:block;
            height:0;
            visibility:hidden;
            clear:both;
      }