css浮动

css浮动布局

css用于布局有三种方式：浮动、定位、弹性布局。

浮动：

在没有使用布局时，元素是以标准流布局的，比如块状元素、行内元素，块状元素是单独一行主要是div，p，ul，li…，行内元素是在同一行出现直到没空间有span,a,…,css是层叠样式，可以通过浮动来提高层数。

这里是两个盒子，当两个都浮动，可以取消标准流把两个块状元素放于同一行

当他们都不浮动时就各占一行。

可以理解为左边的盒子往上提一层，而右边的盒子还在原来那一层，它并不知道在同一个位置已经有盒子了，造成上一层挡住下一层的情况。
要想不被挡住，就要把右边的盒子往上提。

清除浮动:

浮动会对页面的标准流造成影响，所以使用完要记得清除，清除浮动的方式：1、clear清除浮动：<div style="clear:left"></div>，只适用于清除自身左右元素的浮动。
2after清除浮动`:

after{display: block;
	  content: "";
	  clear: both;
	  visibility: hidden;
	  height: 0;}

适用于父元素对子元素清除浮动。
本文仅供个人参考，由于作者水平有限，若有疏漏或错误，请多多指教。