css清除浮动

不清除浮动产生的问题:
css清除浮动_第1张图片

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

  1. 方法一:父元素内添加空的块级元素,并设置clear:both
float left
textDivtextDivtextDivtextDivtext
DixtDivtextDivtextDivtextDivtextDivtextDivtextDiv
bottomDivbotto mDivbottomvbottomDivbottvbottomD
ivbottvbottomDivbottDivbottomDivbottomDivbottomDivbottomDiv
  1. 方法二:为浮动元素的父元素添加伪类,并设置clear:both
	.topDiv {
		width: 500px;
		border: 2px solid black;
		position: relative;
		&:after{
			content:"";
			width: 0;
			height: 0;
			visibility: hidden;
			display: block;
			clear: both;
		}
	}

清除浮动后的布局:
css清除浮动_第2张图片

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

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

你可能感兴趣的:(学习笔记,技术杂项,css)