CSS学习笔记9：清除浮动

最新推荐文章于 2022-06-08 15:15:03 发布

编程大学姐远春儿

最新推荐文章于 2022-06-08 15:15:03 发布

阅读量666

点赞数 3

分类专栏：前端基础文章标签： css 布局

本文链接：https://blog.csdn.net/sinat_34647836/article/details/55004778

版权

前端基础专栏收录该内容

19 篇文章 4 订阅

订阅专栏

在实际操作中，一般不会给父亲盒子设置高度，它的高度是随内容增加自适应的高度。浮动盒子不属于文档标准流，父亲盒子里的元素浮动后，就脱离了标准文档流，所以无法撑高父亲盒子，父亲盒子的高度为0，也就会出现父亲盒子不会自动伸高来闭合浮动元素的现象。但是，在实际布局中，我们并不希望这样，所以需要闭合浮动元素，使其父亲盒子表现出正常的高度。为了解决这个问题，我们就要清除浮动。
清除浮动的方法有4种：

一、给浮动的元素的祖先元素加高度。

浮动的元素，只能被有高度的盒子关住。也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。

二、clear:both;

在较后面的最后一个盒子增加clear:both;
CSS代码：

.box2{
     clear: both;
}

HTML代码：

<div class="box1">
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>HTML5</li>
    <li>设计模式</li>
</ul>
</div>

<div class="box2">
    <ul>
        <li>学习方法</li>
        <li>英语水平</li>
        <li>面试技巧</li>
    </ul>
</div>

clear就是清除，both指的是左浮动、右浮动都要清除。
最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。但这种方法有一个非常大的、致命的问题，margin失效了。

三、隔墙法

墙用自己的身体当做了间隙。

1.外墙法

CSS代码

.cl{
    clear: both;
}
.h16{
    height: 16px;
}

HTML代码

<div class="box1">
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>HTML5</li>
    <li>设计模式</li>
</ul>
</div>

<div class="cl h16">这是一道墙</div>

<div class="box2">
    <ul>
        <li>学习方法</li>
        <li>英语水平</li>
        <li>面试技巧</li>
    </ul>
</div>

2.内墙法

内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。
HTML代码：

</head>
<body>
    <div class="box1">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>设计模式</li>
        </ul>

        <div class="cl h16">我是修在家里的一堵墙</div>

    </div>

    <div class="box2">
        <ul>
            <li>学习方法</li>
            <li>英语水平</li>
            <li>面试技巧</li>
        </ul>
    </div>
</body>

这里写图片描述

四、overflow:hidden;

overflow就是“溢出”的意思， hidden就是“隐藏”的意思。表示“溢出隐藏”，所有溢出边框的内容，都要隐藏掉。

本意就是清除溢出到盒子外面的文字。但是，前端开发工程师又发现了，它能做偏方。

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。并且,overflow:hidden;能够让margin生效。

这里写图片描述

HTML代码：

div{
    width: 400px;
    border: 10px solid black;
    overflow: hidden;
}

五、伪元素

可以完美兼容当前主流的各大浏览器！

1. after伪元素

基本语法：
css部分：

.clearfix:after {
          content:"";
          Visibility:hidden;  
          Display:block; 
          Height:0;
          Clear:both;
     }
 .clearfix{
      Zoom:1;
}

html语义框架

<div class="news clearfix">
    <img src="news-pic.jpg" />
    <p>哈哈哈</p>
</div>

2.双伪元素

基本语法：

.clearfix:before,.clearfix:after{
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}

总结：清除浮动大致有以下几种方法：
1.给父亲加高
2.clear：both法。

给最后一个儿子加clear：both。（margin 失效）
内墙：在第一个儿子里添加一个类为clear：both的盒子。
外墙：在两个儿子之间添加一个类为clear：both的盒子。

3.overflow：hidden。给父亲盒子添加overflow：hidden 属性。（IE6不支持，需添加_zoom:1;并且，如果想在压父盒子边做特效会被隐藏一部分。）
4.伪元素法。包括after伪元素和双伪元素两种。可以完美兼容当前主流的各大浏览器，作为主要清理浮动方式。清除小块与小块之间的浮动，可选择overflow：hidden。

六、浏览器兼容问题

上述清除浮动的知识点遇见的浏览器兼容问题：

1.IE6、IE7，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大。

IE6留了一个后门，就是只要给css属性之前，加上下划线，这个属性就是IE6认识的专有属性，这就是浏览器hack（黑客）。
解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px，并在前面加上下滑线。

height: 4px;
_font-size: 0px;

2.IE6不支持用overflow:hidden;清除浮动

解决办法：

overflow: hidden;
_zoom:1;

IE6兼容overflow:hidden;的本意，就是溢出盒子的border的东西隐藏，不兼容的是overflow:hidden;清除浮动的时候。_zoom:1;能够触发浏览器hasLayout机制。

编程大学姐远春儿

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
CSS学习笔记9：清除浮动

在实际操作中，一般不会给父亲盒子设置高度，它的高度是随内容增加自适应的高度。浮动盒子不属于文档标准流，父亲盒子里的元素浮动后，就脱离了标准文档流，所以无法撑高父亲盒子，父亲盒子的高度为0，也就会出现父亲盒子不会自动伸高来闭合浮动元素的现象。但是，在实际布局中，我们并不希望这样，所以需要闭合浮动元素，使其父亲盒子表现出正常的高度。为了解决这个问题，我们就要清除浮动。清除浮动的方法有4种
复制链接

扫一扫

专栏目录