关于前端的碎碎念2-CSS装修之float浮动时（解决父级边框塌陷）常用的清除浮动的8种方法

举报
花溪 发表于 2020/06/29 11:30:34 2020/06/29
5.4k+ 0 2
【摘要】 学习前端，前端就好比如盖房子~ html就充当了房子结构这部分，也是房子的基础。 css呢，就好比咱们房子的装修，墙面什么颜色，什么风格，什么地板...这些给房子改变风格，样式的就是css javascript呢，就好比这个房子的功能，房子需要制冷吧，需要暖气吧，也需要上下水吧。这些功能性的就相当于是javascript 好了，大概这样子开始了~follow me~

概述：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

上下排列：clear属性，表示清除浮动的，left、right、both

嵌套排列：

  • 固定宽高 : 不推荐 , 不能把高度固定死，不适合做自适应的效果。

  • 父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。

  • overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。

  • display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。

  • 设置空标签 : 不推荐 , 会多添加一个标签。

  • after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。

  • ( clear属性只会操作块标签，对内联标签不起作用 )

image.png

image.png

1.父级div定义伪类：after 和zoom；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
             border: 1px solid #000; 
             }
        .box2{
            border: 1px solid aqua;
            background:aquamarine;
        }
        .fl{
            float:left;
            width:50%;
            text-align:left;
            background:pink;
        }
        .fr{
            float:right;
            width:50%;
            text-align:right;
            background:yellow;
        }
        /*清除浮动代码*/ 
        .clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
        .clearfix{zoom:1} 
    </style>
</head>
<body>
<h1>现在有一个父元素中包含2个子元素，要求对这两个子元素实现左右布局，各占父元素空间的一半，父元素高度不能塌陷。</h1>
<div class="box clearfix">
    <div class="fl">子元素1</div>
    <div class="fr">子元素2</div>
</div>
<div class="box2">
    div2
</div>
</body>
</html>

  • 原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

  • 优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

  • 缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持

  • 建议：推荐使用，建议定义公共类，以减少CSS代码

2.在结尾处添加空div标签 clear：both

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
             border: 1px solid #000; 
             }
        .clearfloat{
            clear:both;/* 解决代码 */
        }
        .box2{
            border: 1px solid aqua;
            background:aquamarine;
        }
        .fl{
            float:left;
            width:50%;
            text-align:left;
            background:pink;
        }
        .fr{
            float:right;
            width:50%;
            display:inlie-block;            
            text-align:right;
            background:yellow;
        }
    </style>
</head>
<body>
<h1>现在有一个父元素中包含2个子元素，要求对这两个子元素实现左右布局，各占父元素空间的一半，父元素高度不能塌陷。</h1>
<div class="box ">
    <div class="fl">子元素1</div>
    <div class="fr">子元素2</div>
    <div class="clearfloat"></div>
</div>
<div class="box2">
    div2
</div>
</body>
</html>

  • 原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

  • 优点：简单，代码少，浏览器支持好，不容易出现怪问题

  • 缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽

  • 建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

3.父级div定义高度 height；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
             border: 1px solid #000; 
             height:80px;/* 解决代码 */
             background:#ccc;
             }
        .box2{
            border: 1px solid aqua;
            background:aquamarine;
        }
        .fl{
            float:left;
            width:50%;
            text-align:left;
            background:pink;
        }
        .fr{
            float:right;
            width:50%;
            display:inlie-block;            
            text-align:right;
            background:yellow;
        }
    </style>
</head>
<body>
<h1>现在有一个父元素中包含2个子元素，要求对这两个子元素实现左右布局，各占父元素空间的一半，父元素高度不能塌陷。</h1>
<div class="box ">
    <div class="fl">子元素1</div>
    <div class="fr">子元素2</div>
</div>
<div class="box2">
    div2
</div>
</body>
</html>

image.png

  • 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题

  • 优点：简单，代码少，容易掌握

  • 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

  • 建议：不推荐使用，只建议高度固定的布局时使用

4.父级div定义overflow：hidden；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
             border: 1px solid #000; 
             overflow:hidden; /* 解决代码 */
             }
        .box2{
            border: 1px solid aqua;
            background:aquamarine;
        }
        .fl{
            float:left;
            width:50%;
            text-align:left;
            background:pink;
        }
        .fr{
            float:right;
            width:50%;
            text-align:right;
            background:yellow;
        }
    </style>
</head>
<body>
<h1>现在有一个父元素中包含2个子元素，要求对这两个子元素实现左右布局，各占父元素空间的一半，父元素高度不能塌陷。</h1>
<div class="box ">
    <div class="fl">子元素1</div>
    <div class="fr">子元素2</div>
</div>
<div class="box2">
    div2
</div>
</body>
</html>

  • 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

  • 优点：简单，代码少，浏览器支持好

  • 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏

  • 建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用

5.父级div定义overflow：auto；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
             border: 1px solid #000; 
             overflow:auto; /* 解决代码 */
             }
        .box2{
            border: 1px solid aqua;
            background:aquamarine;
        }
        .fl{
            float:left;
            width:50%;
            text-align:left;
            background:pink;
        }
        .fr{
            float:right;
            width:50%;
            text-align:right;
            background:yellow;
        }
    </style>
</head>
<body>
<h1>现在有一个父元素中包含2个子元素，要求对这两个子元素实现左右布局，各占父元素空间的一半，父元素高度不能塌陷。</h1>
<div class="box ">
    <div class="fl">子元素1</div>
    <div class="fr">子元素2</div>
</div>
<div class="box2">
    div2
</div>
</body>
</html>

  • 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度。

  • 优点：简单，代码少，浏览器支持好。

  • 缺点：内部宽高超过父级div时，会出现滚动条。

  • 建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

6.父级div也一起浮动；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
             border: 1px solid #000; 
             width:100%;
             float：left; /* 解决代码 */
             }
        .box2{
            border: 1px solid aqua;
            background:aquamarine;
            clear:both;/* 解决代码 */
        }
        .fl{
            float:left;
            width:50%;
            text-align:left;
            background:pink;
        }
        .fr{
            float:right;
            width:50%;
            text-align:right;
            background:yellow;
        }
    </style>
</head>
<body>
<h1>现在有一个父元素中包含2个子元素，要求对这两个子元素实现左右布局，各占父元素空间的一半，父元素高度不能塌陷。</h1>
<div class="box ">
    <div class="fl">子元素1</div>
    <div class="fr">子元素2</div>
</div>
<div class="box2">
    div2
</div>
</body>
</html>

  • 原理：所有代码一起浮动，就变成了一个整体,必须定义width，不然子元素宽度会自适应。

  • 优点：没有优点。

  • 缺点：会产生新的浮动问题。

  • 建议：不推荐使用，只作了解。

7.父级div定义display:table；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
             border: 1px solid #000; 
             display:table;/* 解决代码 */
             width:100%;/* 解决代码 */
             background:#ccc;
             }
        .box2{
            border: 1px solid aqua;
            background:aquamarine;
        }
        .fl{
            float:left;
            width:50%;
            text-align:left;
            background:pink;
        }
        .fr{
            float:right;
            width:50%;
            display:inlie-block;            
            text-align:right;
            background:yellow;
        }
    </style>
</head>
<body>
<h1>现在有一个父元素中包含2个子元素，要求对这两个子元素实现左右布局，各占父元素空间的一半，父元素高度不能塌陷。</h1>
<div class="box ">
    <div class="fl">子元素1</div>
    <div class="fr">子元素2</div>
</div>
<div class="box2">
    div2
</div>
</body>
</html>

image.png

  • 原理：将div属性变成表格,必须定义width，不然子元素宽度会自适应。(如上图)

  • 优点：没有优点

  • 缺点：会产生新的未知问题

  • 建议：不推荐使用，只作了解

8.在结尾处添加br标签 clear：both

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
             border: 1px solid #000; 
             zoom:1;/* 解决代码 */
             }
        .clearfloat{
            clear:both;/* 解决代码 */
        }
        .box2{
            border: 1px solid aqua;
            background:aquamarine;
        }
        .fl{
            float:left;
            width:50%;
            text-align:left;
            background:pink;
        }
        .fr{
            float:right;
            width:50%;
            display:inlie-block;            
            text-align:right;
            background:yellow;
        }
    </style>
</head>
<body>
<h1>现在有一个父元素中包含2个子元素，要求对这两个子元素实现左右布局，各占父元素空间的一半，父元素高度不能塌陷。</h1>
<div class="box ">
    <div class="fl">子元素1</div>
    <div class="fr">子元素2</div>
    <br class="clearfloat"/>
</div>
<div class="box2">
    div2
</div>
</body>
</html>

  • 原理：父级div定义zoom:1来解决IE浮动问题，结尾处加br标签clear:both

  • 建议：不推荐使用，只作了解

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
css
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论（0）

抱歉，系统识别当前为高风险访问，暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称，即可参与社区互动！

    *长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

    确认 取消

    加入云驻计划，成为创作者

    • 华为云周边好礼
    • 免费体验产品
    • 特殊身份标识
    • 线下官方门票
    • 内部专家零距离
    • 与10000+优质创作者共同成长
    立即加入