4.清除浮动

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

未清除浮动的情况:

清除浮动的第一种方法:使用clear属性的空元素(这里用的是div,其它均可)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.parent{
			background: gray;
		}
		.clear{

		}
		.box{
			float: left;
			width: 100px;
			height: 100px;
			border: 1px solid red;
		}
		.next{
			width: 100px;
			height: 100px;
			background: green;
		}
		.clear{
			clear: both;
		}
	</style>
</head>
<body>
<div class="parent clear">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="clear"></div>
</div>
	<div class="next"></div>
</body>
</html>

清除之后的效果:

第二种方法:给浮动元素的父元素容器添加overflow:hidden(auto)另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 *zoom:1。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent{
            background: gray;
            overflow: auto;
            /*overflow: hidden;*/
            /*兼容IE6*/
            *zoom: 1;

        }
        .clear{

        }
        .box{
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        .next{
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
<div class="parent clear">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
    <div class="next"></div>
</body>
</html>

第三种方法:使用:after伪元素法(在浮动元素的父元素添加一个属性clearfix)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent{
            background: gray;
        }
        .clearfix:after{
            content: ‘.‘;
            height: 0;
            visibility: hidden;
            display: block;
            clear: both;
        }
        /*.clearfix{
            zoom:1;在IE6和IE7时添加
        }*/
        .box{
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        .next{
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
<div class="parent clearfix">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
    <div class="next"></div>
</body>
</html>
时间: 2024-10-01 23:21:02

4.清除浮动的相关文章

关于浮动与清除浮动

页面布局方式,主要包含:文档流.浮动层.float属性. ?html页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. ?浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框.而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素.内联元素:有空隙就插入. ?float属性包括left(元素向左浮动).right(元素向右浮动).

关于清除浮动

晚上本来想去苹果官网看看新产品,顺便看看高大上的视频,进入之后,习惯性的打开了审查元素,然后就开始研究起了苹果的代码 看到图片列表,有这样一段: 就是下面这三行代码: .promos ul:after {  clear: both; } .promos ul:before, .promos ul:after { content: ' '; display: table; } bootstrap也是这种写法. 很显然,是用来清除浮动的,和小伙伴聊了一下,说到几个有意思的地方. 说的最多的就是dis

css 清除浮动

功能: 实现图文混排效果 原理: 绝对定位的元素脱离了文档流,而浮动元素依旧在文档流中: 清除浮动:(高度塌陷) 1. 额外标签法,<div style="clear:both;"></div>(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁.) 2. 使用after伪元素(该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素) #parent{zoom: 1} #parent:after{ conten

.clearfix 清除浮动,@import

我们知道,在网页的DIV+CSS布局中,很多时候要用到浮动. 既然有浮动,那就有清除浮动. 清除浮动有很多种方式,而在实际项目中,比较常用的是这一种. .clearfix:after { content: ""; display: block; clear: both; } .clearfix { zoom: 1; } 我们可以把这部分代码复制到项目中的CSS文件中,也可以保存为一个CSS文件,然后引入. 那么怎么引入呢?这时,我们就需要用到 @import. @import url(

css清除浮动的方法总结

在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问

前端之旅HTML与CSS篇之清除浮动塌陷

以下内容为转载. 方法1:给浮动的元素的上级添加高度如果一个元素要浮动,那么它的祖先元素一定要有高度.高度的盒子,才能关住浮动.只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素.所以就是清除浮动带来的影响了.所以只需要给li的上级ul或者div设置一个height:40px:(只要是浮动元素的上级元素就可以.),那么第二个div就好挤下来,在第一个盒子下面显示出来.方法2:clear:both;但是在实际开发过程当中中,高度height很少出现.为什么?因为能被内容撑高!那也就

css浮动(folat),清除浮动(clear)

css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右浮动 html文档流:自窗体自上而下分成一行一行,并在没行中从左到右的顺序排放元素. 通过例子来解释浮动 1.页面上有两个块元素,每个块元素独占一行 2.我们希望他们能并排显示,这是就可以使用float,我们先给红色的div加float:left,发现两个是在一行了,但是他们重叠在了一起. 3.这是

CSS清除浮动技巧

一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了. 简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动. 二.浮动产生负作用 1.背景不能显示由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色

清除浮动float那点事儿

抛弃那些没用的方法,只记住最实用的一种方法即可! 给要清除浮动的父元素多加一个class属性:clearfix!!! 样式如下: .clearfix:after{     content:".";             display:block;             height:0;             clear:both;             visibility:hidden; } 为了兼容ie6,ie7(现在的项目几乎已经完全不考虑) .clearfix{ z