php元素浮动会产生哪些影响,css浮动及其危害和解决方法

html元素有三种类型：

①、块状元素： 如div -------- display：block

②、内联元素： 如span ------ display：inline

③、内联块元素：如input ---- display：inline-block

在标准流中，三种类型的元素呈现的方式不同

*display:block

元素会独占一行，多个block元素会各自新起一行

*inline 和 inline-block

元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行

如果想block元素像inline元素那些不会自动换行，可以用css的float属性(浮动)

left --------- 元素向左浮动。

right ------- 元素向右浮动。

none ------ 默认值。元素不浮动，并会显示在其在文本中出现的位置。

inherit ---- 规定应该从父元素继承 float 属性的值。

虽然浮动很方便，但是也带来了一定的负面影响

浮动主要造成了父元素高度塌陷，以至于父元素很多像背景颜色，边框等都不能正确的显示出来以及同级子元素的位置

我们先来看一下正常的浮动效果

.parent{

width: 300px;

border: 3px solid black;

background-color: yellow;

}

.child{

width: 50px;

height: 50px;

}

.child1{

background-color: red;

float: left;

}

.child2{

background-color: blue;

float: right;

}

正常的浮动效果

正常的效果如上图所示：

我们可以看到父元素本来是设置的属性

background-color: yellow

border: 3px solid black

都没有显示出来，就是因为浮动造成的高度坍塌！

解决浮动的负面影响

解决后的效果图

①、给父元素定义高度

.parent{

height: 50px;

}

②、给父元素加上overflow：hidden

.parent{

overflow: hidden;

}

③、给父元素加上overflow：auto

.parent{

overflow: auto;

}

④、给父元素加上display: table

.parent{

display: table;

}

⑤、在最后一个子元素上加一个div，使用clear：both

⑥、父元素定义伪类：after

.parent:after{

content:"";

display:block;

clear:both;

}

在实际开发中推荐使用第六种