No.1
No.2
No.3
INo.4
代码运行结果:
1、设置父元素float 2、在最后一个设置浮动的子元素后加一个空div ,并且让这个div清除浮动。 可以不用对父级设置高度 也无需技术父级高度,方便适用,但会多加CSS和HTML标签。 例如: 3、父元素设置overflow:hidden;或overflow:auto;。 因为overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。 4、不要用浮动,而使用:子元素使用display:inline-table或者display:inline-block。 5、使用CSS的:after伪元素 after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)。给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
例如:
background-color: #f1f1f1;
width: 80%;
margin: 20px auto;
float: left;
}
.clear {clear: both;}
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
-->