布局:清除浮动

浮动元素可能导致父级元素高度塌陷,影响布局。清除浮动是为了恢复父级元素高度,常用方法包括额外标签法、overflow属性和伪元素。额外标签法通过添加无意义元素来清除,简单但增加结构复杂性;overflow属性通过设定hidden、auto或scroll来隐藏溢出内容并恢复父级高度,但可能隐藏必要内容;伪元素如clearfix通过内容为空的伪元素实现,适用于IE7以上浏览器,代码更整洁。
摘要由CSDN通过智能技术生成

为何要清除浮动

父级元素有时不方便给高度,子级元素浮动就会影响父级元素下的其他标准流的布局

  1. 浮动子元素与其父元素

           父元素没有设置高度时,标准流下子元素会撑开父元素,但是当子元素浮动时子元素不会占用父元素的高度,则父元素高度为0,父元素下的标准流元素就会占据原本要给子元素留的空间 —— 子元素会遮挡住原本在他下方的标准流元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box1 {
                background-color: blue;
            }
            .box1 div{
                float: left;
                width: 400px;
                height: 400px;
            }
            .d1 {
                background-color: red;
            }
            .d2 {
                background-color: green;
            }
            .box2 {
                background-color: black;
                width: 900px;
                height: 500px;
            }
        </style>
    </head>
    <body>
    <div class="box1">
        <div class="d1"></div>
        <div class="d2"></div>
    </div>
    <div class="box2"></div>
    </body>
    </html>
    
  2. 清除浮动的本质

           解决有高度子元素浮动时父元素高度为0的问题。清除浮动后父元素会被浮动的子元素撑开

清除浮动的方式

  1. 添加额外标签法

    通过在浮动元素的末尾添加一个空标签例如<div style="clear:both"></div>用来清除浮动

    优点:通俗易懂,书写方便
    缺点:添加许多无意义标签,结构化差

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .clear {
                clear: both;
            }
            .box1 {
                width: 900px;
                background-color: blue;
            }
            .d1,
            .d2{
                float: left;
                width: 400px;
                height: 400px;
            }
            .d1 {
                background-color: red;
            }
            .d2 {
                background-color: green;
            }
            .box2 {
                background-color: black;
                width: 900px;
                height: 500px;
            }
        </style>
    </head>
    <body>
    <div class="box1">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="clear"></div>
    </div>
    <div class="box2"></div>
    </body>
    </html>
    
  2. 给父标签添加overflow:属性

    overflow属性规定当内容溢出元素框时发生的事情。(overflow还未具体学习到,之后更新)
    overflow属性为overflow:hiddenoverflow:autooverflow:scroll时都可以清除浮动

    优点:代码简洁
    缺点:子元素增多时不会自动换行,会被隐藏,无法显示需要溢出的元素。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            /*.clear {*/
            /*    clear: both;*/
            /*}*/
            .box1 {
                width: 900px;
                background-color: blue;
                overflow: auto;
            }
            .d1,
            .d2{
                float: left;
                width: 400px;
                height: 400px;
            }
            .d1 {
                background-color: red;
            }
            .d2 {
                background-color: green;
            }
            .box2 {
                background-color: black;
                width: 900px;
                height: 500px;
            }
        </style>
    </head>
    <body>
    <div class="box1">
        <div class="d1"></div>
        <div class="d2"></div>
    <!--    <div class="clear"></div>-->
    </div>
    <div class="box2"></div>
    </body>
    </html>
    
  3. 使用after伪元素清除浮动(伪元素还未学习,以后更新)

    为额外标签法的升级版
    代表:淘宝、百度、网易

    优点:易于看懂结构(没有多余标签)
    缺点:ie7及以下老版本浏览器不支持:after,需要用*zoom:1触发hasLayout

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <style>
           * {
               margin: 0;
               padding: 0;
           }
           .clearfix:after {
               content: "";
               display: block;
               height: 0;
               visibility: hidden;
               clear: both;
           }
           .clearfix {
               /*ie6,ie7专用*/
               *zoom:1;
           }
           /*.clear {*/
           /*    clear: both;*/
           /*}*/
           .box1 {
               width: 900px;
               background-color: blue;
               /*overflow: auto;*/
           }
           .d1,
           .d2{
               float: left;
               width: 400px;
               height: 400px;
           }
           .d1 {
               background-color: red;
           }
           .d2 {
               background-color: green;
           }
           .box2 {
               background-color: black;
               width: 900px;
               height: 500px;
           }
       </style>
    </head>
    <body>
    <div class="box1 clearfix">
       <div class="d1"></div>
       <div class="d2"></div>
    <!--    <div class="clear"></div>-->
    </div>
    <div class="box2"></div>
    </body>
    </html>
    
  4. 使用双伪元素清除浮动(未学习原理,以后更新)

    伪元素简化版
    代表:小米、腾讯

    优点:代码更简洁
    缺点:ie7及以下老版本浏览器不支持:after,需要用*zoom:1触发hasLayout

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .clearfix:before,
            .clearfix:after {
                content: "";
                display: table;
            }
            .clearfix:after {
                clear: both;
            }
            .clearfix {
                /*ie7及以下专用*/
                *zoom:1;
            }
            .box1 {
                width: 900px;
                background-color: blue;
                /*overflow: auto;*/
            }
            .d1,
            .d2{
                float: left;
                width: 400px;
                height: 400px;
            }
            .d1 {
                background-color: red;
            }
            .d2 {
                background-color: green;
            }
            .box2 {
                background-color: black;
                width: 900px;
                height: 500px;
            }
        </style>
    </head>
    <body>
    <div class="box1 clearfix">
        <div class="d1"></div>
        <div class="d2"></div>
    </div>
    <div class="box2"></div>
    </body>
    </html>
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值