css的清除浮动

分析HTML代码结构:

div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</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;} 

这里我没有给最外层的DIV.outer 设置高度,但是我们知道如果它里面的元素不浮动的话,那么这个外层的高是会自动被撑开的。但是当内层元素浮动后,就出现了一下影响:

(1):背景不能显示 (2):边框不能撑开 (3):margin 设置值不能正确显示

二、清楚css浮动:

方法一:添加新的元素 、应用 clear:both;

HTML:

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

 CSS:

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

 

方法二:父级div定义 overflow: auto(注意:是父级div也就是这里的  div.outer)

HTML:

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

  CSS:

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

  原理:使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值,如果使用这个值将无法达到清除浮动效果,其他两个值都可以,其区据说在于一个对seo比较友好,另个hidden对seo不是太友好,其他区别我就说不上了,也不浪费时间。

方法三: 据说是最高大上的方法  :after 方法:(注意:作用于浮动元素的父亲)

先说原理:这种方法清除浮动是现在网上最拉风的一种清除浮动,他就是利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法:

                    .clearfix:after,.clearfix:before {
				display: block;
				content: ".";
				height: 0;
				line-height: 0;
				overflow: hidden;
				visibility: none;
				clear: both;
			}
			.clearfix {
				zoom:1; /*兼容ie7一下*/
			}

  

 

时间: 2024-10-05 12:34:45

css的清除浮动的相关文章

【css】清除浮动的几种方式

[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: 1 .news { 2 background-color:gray; 3 border:1px solid black; 4 } 5 .news img { 6 float:left; 7 } 8 .news p { 9 float:right; 10 } 11 <divclass="news"> 12 <imgsrc="/img/news-pic.jgp"

CSS中清除浮动的两种方式

在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div class="father"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3

CSS clear清除浮动

1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动是默认both,也就是说一开始不能有浮动的. 3.使用的案例:假设我清除第三个DIV的浮动 <style type="text/css"> div{ border:1px solid red; float:left; clear:none; } #msg_Div{ width:

div+css之清除浮动

1.对父级设置适合CSS高度对父级设置适合高度样式清除浮动,这里对“.divcss5”设置一定高度即可,一般设置高度需要能确定内容高度才能设置.这里我们知道内容高度是100PX+上下边框为2px,这样具体父级高度为102px 2.clear:both清除浮动 为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此div引入“class="clear"”样式.这样即可清除浮动.

css中清除浮动的方法总结

1.父级div定义height <style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DD

关于CSS样式清除浮动的总结

浮动的元素之间是互相贴靠的.但是在实际的工作中,我们是希望同组的元素互相贴靠的,但是不同组的元素之间是不互相贴靠的.第二组的元素不应该与第一组的元素有任何互相的影响. 比如,我们想要的效果是这样的: 但是如果浮动没有清除的话,就会变成这样: 清除浮动有四种方式,一般常选用后两种,根据不同的情况进行选择. 1)加高法: 浮动的元素,只能被有高的盒子关住.但是,工作上绝不会给所有的盒子都加高度,因为这样很麻烦,而且没法适应页面的快速变化. 2)clear:both 最简单的清除浮动的方法,就是给盒子

CSS——如何清除浮动

众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div.A(这个就是说页面中有一个div,并且把其命名为class="A")中包含了两个或多个子元素div.B,div.C,div.D(这里我以三个为例),并且此时div.B和div.C进行浮动,而div.D不进行任何浮动,此时你可以看到父元素div.A高度仅靠div.D来撑开其高度,如果您将di

css中清除浮动

(1)使用空标签清除浮动 这是目前最常用的一种清除浮动的方法.空标签可以是div标签,也可以是P标签.其实理论上可以是任何标签.这种方法是在需要清除浮动的父级元素内部的最后添加一个清除浮动的空标签,其CSS代码:clear:both.此方法简洁明了,方便实用,但其弊端也很明显,就是增加了无意义的结构元素.此外,有一种与此相似的方法,<br clear="all"/>也可以实现同样的效果. (2)使用after伪对象清除浮动 各浏览器均支持after伪对象,所以after应该

css中清除浮动的方法

1.浮动后会影响别的元素,可以用clear:both来清除浮动. 例如<div class="box1"></div> <div class="box2"></div> css: .box1{ float:left;}     .box2{ clear:both ; } 2.子级浮动会导致父级高度塌陷,可以使用overflow:hidden找回高度