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

举报
花溪 发表于 2020/06/29 11:30:34 2020/06/29
【摘要】 学习前端,前端就好比如盖房子~ 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
  • 点赞
  • 收藏
  • 关注作者

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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