html中加入清除浮动,HTML中清除浮动的几种办法

为什么会有浮动

在一张HTML里,元素的排序方式遵循文档流.即是依次排序.从上到下,从左到右依次排序.

而脱离文档流就意味着不再遵循此规则.可以通过float与positon使得元素脱离文档流,当给一个元素添加float属性时,元素就会脱离标准文档流.

例如在如图中有一个需求是:将P_tag_one与P_tag_two并列.这两个元素可能是两张并列的图片.使用float属性时最佳的选择.

浮动带来的问题

浮动会带来的问题是当子元素浮动时.不清除浮动的话就会造成后面的元素排版乱序.

如何去解决浮动问题

现在的问题就变成P_tag_one与P_tag_two浮动并列,但是又不让子元素P_tag_one与P_tag_two的浮动,而导致后续元素排版乱序

代码

没有浮动之前

*{

margin: 0px;

padding: 0px;

}

div,p{

border-radius: 5%;

border: 1px solid rgba(0, 0, 0, 0.2);

color:#394a6d;

font-weight: bolder;

font-size: 18px;

font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif

}

p{

width: 95px;

height: 95px;

background-color: #48FF7A;

}

.div_one{

background-color: #51dacf;

}

.div_two{

background-color: #41aaa8;

}

P_one

p_two

P_three

p_four

div_one中的两个p浮动之后的情况

设置代码:

.div_one p{

float: left;

}

如图显示的情况.div_one里的p元素浮动,脱离了标准流.div_two里的两个p元素就顶了上去.造成了元素重叠.

解决重叠方法1

通过手动设置浮动的元素的父元素的高.但是这样做有一个不好的地方,就是把元素的高度给写固定了,不利于后期的维护.不推荐这样写

.div_one{

background-color: #51dacf;

height: 200px;

}

方法2

第二种方式是通过给第二个元素设置clear属性.使用clear属性,但是父元素的高度不会显示(父元素成了一条线 = = )

.div_two{

width: 200px;

clear:both;

background-color: #41aaa8;

}

方法3

通过在中间添加一个元素,给添加的元素设置clear属性.但是违背了HTML负责结构,CSS负责设置样式的原则

.wall{

clear: both;

}

//设置在div1与div2之间

方法4

在设置浮动元素的最后添加一个元素,此元素书用clear属性.但是这样做会增加一个无意义的标签.不符合规范.

.wall{

clear:both;

}

P_one

p_two

P_three

p_four

方法5

与方法4类似,但是使用了伪元素.好处是没有使用HTML标签.避免增加无意义的标签.推荐使用

.div_one::after,.div_one::before{

/*设置添加的子元素的内容为空*/

content: "";

/*设置添加的子元素为块级元素*/

display: block;

/*设置添加的子元素的高度为0*/

height: 0;

/*设置添加的子元素看不见*/

visibility: hidden;

/*给添加的子元素设置clear: both;*/

clear: both;

}

.box1{

/*兼容IE6*/

*zoom:1;

}

方法6

使用overfllow:hieendn.优点就是比较简洁.但是overflow: hidden也存在别的属性功能;会有把超出的部分隐藏.

.div_one{

background-color: #51dacf;

overflow: hidden;

*zoom:1;

}