不清除浮动产生的问题:
红色为浮动的元素,浮动元素影响正常DOM流动,其父元素不考虑该浮动元素的高度,似乎无视了该浮动元素。并且影响了父元素的兄弟元素。
- 方法一:父元素内添加空的块级元素,并设置clear:both
<div class="topDiv">
<div class="floatDiv">float left</div>
<div class="textDiv">textDivtextDivtextDivtextDivtext<br>DixtDivtextDivtextDivtextDivtextDivtextDivtextDiv</div>
<div style="clear: both"></div>
</div>
<div class="bottomDiv">bottomDivbotto
mDivbottomvbottomDivbottvbottomD<br>ivbottvbottomDivbottDivbottomDivbottomDivbottomDivbottomDiv
</div>
- 方法二:为浮动元素的父元素添加伪类,并设置clear:both
.topDiv {
width: 500px;
border: 2px solid black;
position: relative;
&:after{
content:"";
width: 0;
height: 0;
visibility: hidden;
display: block;
clear: both;
}
}
清除浮动后的布局:
- 方法三:为浮动元素的父元素添加overflow:hidden
学习参考链接:https://blog.csdn.net/u012207345/article/details/78279961