css浮动全解，float: left； clear:both 清除浮动方法 5个

css浮动

一、什么是浮动

浮动怎么理解？

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动会脱离文档流，相当于此框像图层一样向外飘起来了，原本它的位置会被下方的内容顶上，导致下方的内容和浮动的重合一部分。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动的特点:

1.脱离文档流 ，浮动不占位。

2.转化为内联块，默认排列成一行，遇到边界自动换行。

3.层级高于其他元素。

​ 图源：w3cschool

二、元素如何浮动

浮动
float: left;
float:right;
float:none;
清除浮动：
clear：left;
clear:right;
clear:both;

三、清除浮动方法

为什么要清除浮动？

当元素在父盒子中时，默认情况下，父div的高度是auto,它可以被子div任意的撑大。如果没有给父高度，那么元素内容高度会撑起父盒子来，那么，当元素浮动起来，相当于往外脱离了父盒子，此时父盒子空间直接塌缩为一条顶部的线，高度为0。父盒子下面的内容也会顶上来，为了避免这种情况，要清除子元素浮动带来的影响。

由上述，c没添加margin-top的话，顶端会与浮动元素的下边缘重合。

1.给父级加上高度

优点：简单粗暴有效。

缺点：后面代码需要不断的改这个高度。

<style type="text/css">
		.father{
     
			height: 200px;
			border: 1px solid #000;
		}	
		
		  .a{
     
		 	border: 5px solid green;