css之清除浮动

最新推荐文章于 2023-07-20 17:15:10 发布

HU_LSS

最新推荐文章于 2023-07-20 17:15:10 发布

阅读量129

点赞数

分类专栏：开发文章标签： css

本文链接：https://blog.csdn.net/weixin_43527195/article/details/114333069

版权

开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

css之清除浮动

清除浮动：
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

clear语法：clear : none | left | right | both取值：none : 默认值。允许两边都可以有浮动对象left : 不允许左边有浮动对象right : 不允许右边有浮动对象both : 不允许有浮动对象但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
方式1(推荐):

.clearfix:after {             <----在类名为“clearfix”的元素内最后面加入内容； 
content: ".";                 <----内容为“.”就是一个英文的句号而已。也可以不写。 
display: block;               <----加入的这个元素转换为块级元素。 
clear: both;                  <----清除左右两边浮动。 
visibility: hidden;           <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已； 
line-height: 0;               <----行高为0； 
height: 0;                    <----高度为0； 
font-size:0;                  <----字体大小为0； 
} 
.clearfix { *zoom:1;}         <----这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。

整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动

方式2：
overflow:hidden;
overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: #c9033b;
            float:left;
        }
        .div2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float:left;

        }
         .div3 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
         .outer{
             background-color: #303a40;
             //overflow: hidden;
         }
         .clearFloat:after{
             content: '.';
             display: block;
             clear: both;
             height: 0px;
             visibility: hidden;
         }
    </style>
</head>
<body>
    <div class="outer clearFloat">
        <div class="div1">hello world1</div>
        <div class="div2">hello world2</div>
        <div class="div3">hello world3</div>
    </div>



</body>
</html>

HU_LSS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css之清除浮动

css之清除浮动清除浮动：在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。clear语法：clear : none | left | right | both取值：none : 默认值。允许两边都可以有浮动对象left : 不允许左边有浮动
复制链接

扫一扫