html-->css ---->浮动

一、浮动：

　　1.1。为什么要使用浮动：

　　　　　　说明：页面出现上下布局时都用2个兄弟块元素来实现 而左右布局时

　　　　　　行元素因无法设置宽高这一点 无法实现我们经常想要的效果

　　　　　　所以有了浮动属性 浮动属性就是让。所有元素能够实现左右结构而存在。

　　1.2.含义;首先要明白，只要使用浮动的话，就会改变原来的文档流规则，

　　就不需要进行遵守以前的文档流规则，而是遵守浮动原则。

　　1.3、什么是文档流规则：

　　　　　　 文档流规则：符合块状元素以及内联元素的。

　   1.4、浮动：左浮动：从左往右进行浮动，知道碰到边框就停下来。

　　　　　　右浮动：从右往左进行浮动。

　　　　　　谁先浮动谁就占第一位。

　  1.5、浮动出现的位置; 就是层叠问题：

　　　　　　为什么会出现层叠问题;

　　　　　　　　解答：首先当使用浮动之后就不再遵守文档流了，

　　　　　　　　所以他就不在占据空间，往上飞一层，而这个时候兄弟就会占据一的位置，

　　　　　　　　就会占据以的位置，但是1只是往上飞一层，所以1就盖住了它的兄弟。

 

 

　　1.6、如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。

 

 

　　1.7、如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

 

 二、解决浮动出现的问题：

　　　　高度层递：只要使用浮动就出现这个问题（如图所示）

 

 　　所以就要进行清楚浮动：

 

 浮动的案例：