css清除浮动

不清除浮动产生的问题：

红色为浮动的元素，浮动元素影响正常DOM流动，其父元素不考虑该浮动元素的高度，似乎无视了该浮动元素。并且影响了父元素的兄弟元素。

1. 方法一：父元素内添加空的块级元素，并设置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>

2. 方法二：为浮动元素的父元素添加伪类，并设置clear:both

	.topDiv {
		width: 500px;
		border: 2px solid black;
		position: relative;
		&:after{
			content:"";
			width: 0;
			height: 0;
			visibility: hidden;
			display: block;
			clear: both;
		}
	}

清除浮动后的布局：

3. 方法三：为浮动元素的父元素添加overflow:hidden

学习参考链接：https://blog.csdn.net/u012207345/article/details/78279961