元素浮动的特点:
(1)元素浮动以后会完全脱离文档流,浮动以后元素会一直向父元素的最上方移动,直到遇到父元素的边框或者其他的浮动元素,会停止移动。
(2)如果浮动元素的上边是一个块元素,则浮动元素不会覆盖块元素。
(3)浮动元素不会超过它上边的浮动的兄弟元素,最多一边齐。
(4)浮动元素不会覆盖文字,文字会自动环绕在浮动元素的周围,可以通过浮动来实现文字环绕的效果。
(5)块元素脱离文档流以后,不会独自占一行,宽度和高度都被内容撑开。
(6)内联元素脱离文档流以后会变成块元素
高度塌陷:
父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度,也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移,导致整个页面的布局混乱
解决方法:
(1)浮动元素后添加<div class=”clear”></div>添加清除浮动样式,使用这种方式会在页面中添加多余的结构。
.clear{
clear:both
}
<body>
<div id="div">
<div id="div1"></div>
<div id="div2"></div>
<div class="clear"></div>
<!--浮动元素后添加<div class=”clear”></div>添加清除浮动样式 -->
</div>
</body>
<style>
#div {
width: 400px;
background: #ccc;
}
#div1 {
width: 100px;
height: 100px;
background: green;
float: left;
}
#div2 {
width: 100px;
height: 100px;
background: red;
float: right;
}
.clear {
clear: both
}
</style>
(2)使用after伪类,向父元素后添加一个块元素,并对其清除浮动。该种方式的原理和方法一原理一样,但是不用向页面中添加多余的结构。
#div::after {
content: "";
display: block;
clear: both
}
(3)开启父元素的BFC,为父元素添加样式
overflow:hidden;
(4)手动为父元素添加高度。