清除浮动的几种方法

老生常谈，清除浮动

  1. 首先介绍一下浮动元素的特点

    1.在一行显示；
    2.浮动元素会脱离文档流，导致下面没有浮动的元素之别不了它的高度和位置，就会往上跑占领浮动元素的位置；
    3.元素都是左浮动float:left 元素从左往右依次排列；如果元素都是右浮动，元素从右往左依次排列；
    4.父元素浮动，子元素并不会继承子元素的浮动，如果想要子元素也在一行显示，我们需要给子元素也加浮动的属性；
    5.浮动属性不能继承；
    6.浮动元素本身具有块的特点，所以用了浮动就不需要再加display:block；
    7.所有的元素都可以用浮动属性；

  2. 浮动产生的影响

    1.设置背景颜色属性背景没有起作用；
    2.给父元素设置边框border属性没有被撑开；
    3.给父元素设置内边距padding属性也没有被撑开；

  3. 如何解决浮动产生的影响，清浮动

    1.给浮动元素的父元素手动添加一个高度height属性（不推荐）
    2.给浮动元素的父元素设置：overflow: hidden/auto
    3.在浮动元素的父元素结束变迁之前加一个具有块级元素特点的标签（我们一般用div），
    给元素加一个clear:both <div style="clear:both"><div>
    4.clearfix伪元素去清除浮动

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .wrap{
            background-color: mediumvioletred;
            border: 10px solid red;
            padding: 10px;
            /*height: 200px;*/
           /* overflow: hidden;*/
        }
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background-color: darkblue;
        }
        .right{
            float: left;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .clearfix:after{
            display: block;/*确保元素是一个块级元素*/
            clear: both;/*不允许左右两边有浮动对象*/
            content: '';
            *zoom:1;/*兼容ie7*/
            /*写全的样式属性：下面的四个属性不是必备的条件*/
            height: 0;
            font-size: 0;
            overflow: hidden;
            visibility: hidden;
        }
    </style>
</head>
<body>
<div class="wrap clearfix">

    <div class="left"></div>
    <div class="right"></div>
    <!--<div style="clear:both"></div>-->
</div>
</body>
</html>

     

posted @ 2019-01-17 11:24  lhjfly  阅读(932)  评论(1)  编辑  收藏  举报