CSS清除浮动，什么时候需要清除浮动，清除浮动的方法有哪些？

2024-03-05 04:04:14 阅读 0

2.清除浮子。什么时候需要清除漂浮物？清除漂浮物的方法有哪些？

1.什么时候需要清除漂浮物？

当我们浮动一个元素时，我们的元素将脱离文档流并像船一样漂浮在文档上。

在 CSS 中，任何元素都可以浮动。浮动元素会创建一个块级框，无论它是什么类型的元素。

浮动主要流行于页面布局，使用后如果不清除，后患无穷。

知乎截图：

清除浮动css写法_css清除浮动后都要清除吗_清除浮动的css属性

分析HTML代码结构：

<div class="outer">
    <div class="div1">1div>
    <div class="div2">2div>
    <div class="div3">3div>
div>

分析CSS代码样式：

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}

清除浮动css写法_css清除浮动后都要清除吗_清除浮动的css属性

这里我没有设置最外层DIV.outer的高度，但是我们知道，如果里面的元素不浮动，那么外层的高度会自动扩展。但是当内部元素浮动时，就会产生影响：

1、父盒子受影响，无法左右居中。

2.我没有设置父盒子的高度。浮动后，父盒子的高度并没有扩大。图中展开的高度就是效果。

2、清除漂浮物的方法有哪些？

Clear 还有 4 个可能的值。最常用的是both，清除左右两侧的浮动。 left和right只能清除一个方向的浮动。 none 是默认值。

方法一：添加新元素并应用clear:both;

HTML：

<div class="outer">
    <div class="div1">1div>
    <div class="div2">2div>
    <div class="div3">3div>
    <div class="clear">div>
div>

CSS：

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

影响：

清除浮动css写法_清除浮动的css属性_css清除浮动后都要清除吗

现在：

清除浮动的css属性_清除浮动css写法_css清除浮动后都要清除吗

【补充】：

清除带有空标签的浮动。

清除浮动css写法_清除浮动的css属性_css清除浮动后都要清除吗

方法二：父div定义：auto（注意：是父div，也就是这里的div.outer）

HTML：

<div class="outer over-flow"> //这里添加了一个class
    <div class="div1">1div>
    <div class="div2">2div>
    <div class="div3">3div>
    
div>

CSS：

.over-flow{
    overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题
}

效果图与上面相同。

原理：使用属性清除浮动时需要注意的一点是，有三个属性值：auto、。我们可以使用和auto value来清除浮动，但是记住不要使用。如果使用该值，将无法清除浮动。另外两个值也可以。

【补充】：

使用属性

该方法通过空标签元素清除浮动，有效解决了必须添加无意代码的缺点。使用这种方法，只需要在需要清除浮动的元素中定义 CSS 属性: :auto 即可。：汽车; 使高度自适应，缩放：1；是为了兼容IE6，也可以用:1%;来解决。请注意，缩放不符合 W3C 标准。 : 也可以实现。 : 也可以实现。

清除浮动的css属性_清除浮动css写法_css清除浮动后都要清除吗

方法三：据说是最高级的方法：after方法：（注：作用于浮动元素的父级）

先说一下原理：它利用 :after 和 : 在元素内部插入两个元素块，达到清除浮动的效果。实现原理与clear:both方法类似，只不过：clear在html中插入一个div.clear标签，而outer则使用其伪类clear:after在元素内部添加类似div.clear的效果。我们来看看它的具体用法：

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
.outer:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/

其中，明确：两者；指清除所有浮动； : '.'; ：堵塞; 是FF//opera/IE8不可或缺的。

其中()可以取值也可以为空。的功能：; 就是让浏览器渲染但不显示，这样就可以实现清晰的浮动。

现在：

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;} 
.clearfix:after {content:'';display:block;clear:both;visibility:hidden;zoom:1;}