float浮动

float浮动

float

float：left

元素会在脱离文档流时的位置的上方向左浮动起来

float：right

元素会在脱离文档流时的位置的上方向右浮动起来

clear

clear：left

清除元素左边的浮动

clear：right

清除元素右边的浮动

clear：both

清除左右两边的浮动

关于浮动

• 浮动元素的外边距不会合并
• 脱离文档流，块级元素可占据他们的位置
• 不脱离文本流，内联元素可环绕在其周围，有文本环绕的效果
• 一旦浮动，元素就会变成行内块元素（display: inline-block）

关于清除浮动

由于浮动的元素脱离文档流，所以如果该元素的父元素如果没有设置hight，就会导致父元素高度坍缩，影响布局，所以需要清除浮动

清除浮动的集中方法

1.浮动父元素不推荐

原理：浮动的元素会延伸，从而包含其所有后代元素。

应用对象：父元素

2.overflow属性谨慎使用

overflow 属性本意是规定了当内容溢出元素框时发生的事情。但当其属性值为hidden或auto时，它会自动的清理包含的任何浮动元素，也就意味着它是认可浮动元素的高度的。但在某些情况下，使用该方法会产生滚动条或截断内容。所以使用时需谨慎。

应用对象：父元素

3.clear属性推荐

clear属性会给该元素添加足够的外边距，从而达到清除浮动的效果。clear 属性的值可以是：left、right、both或none。

应用对象：相邻元素

4.伪元素推荐

在没有现成元素可以应用clear属性时，我们可以使用伪元素：

.clear ::after{
	content: "";//伪元素必须设置内容，没有内容也要设置为空，不然伪元素不会生效
	display：block；
	visibility: hidden;//可见性为不可见，
	height: 0;
	clear: both;//清除左右浮动
}

注：after 会在元素内容后面而不是元素后面插入一个伪元素。

应用对象：父元素

5.空元素不推荐

直接在浮动元素后面添加一个空元素，设置clear: both:

<div style="clear:both;"></div>

会增加不必要的代码，不推荐