15、浮动

float属性

float取值

left: 从左往右排列

right:从右往左排列

作用：浮动是一个排版方式,水平的排版 只能设置一个元素左对齐/右对齐

注意：1.浮动不区分块级/行级/行内块级

2.浮动脱离了标准文档流，脱离标准文档流之后的元素 不可以margin:0px auto

浮动后的元素与元素之间的影响

浮动后元素会脱离标准文档流，不在同一层次，如果前面的元素浮动了，后面的元素没有浮动

那么前面的元素会覆盖后面的元素

浮动元素之间的排序规则

1同一方向 先浮动的元素会显示在前面 后浮动的元素显示在后面

2不同方向 左浮动找左浮动 右浮动找右浮动

3浮动后的位置 是由浮动前在标准文档流的位置【行位置】决定

浮动元素的贴靠性

浮动时 当其中一个子元素没有位置填充时，寻找上上一个元素 ，有位置就填充 ， 没有位置继续向上找

直到找到父元素位置为止 ， 如果父元素还没有位置填充，以父元素的基线填充

浮动元素的字围现象

作用：常见的图文混排

div{

float: left;

}

<div><img src="img/chn.jpg" alt=""></div>

<p>陈浩南，英文名peter chenAndy ；1968年12月5日出生。

</p>

浮动元素的高度问题

在标准流中内容的高度可以撑起父元素的高度

在浮动流中 浮动的元素是不可以撑起父元素的高度的

1.在企业中什么时候用标准流 什么时候右浮动流

垂直方向的布局使用标准流排版

水平方向的布局使用浮动流

2.拿到一个很复杂的页面如何下手

1从上至下分割布局

2从外向内分割布局

3如果水平方向不是一个整体 ，可以先划分模块， 一一布局

清除浮动

方法1在父元素中添加属性：overflow:hidden 清除这个父元素中子元素对浮动页面的影响【给父元素恢复高度】

弊端：如果父元素添加了宽高 且小于子元素的宽高 子元素多出来的部分会被隐藏

方法2：在想要正常显示的标签之前添加div 对其设置属性clear:both

弊端：页面中添加了 不必要的标签 显得页面杂乱 繁琐

方法3：通过伪元素选择器 添加元素

1.父：after{

display：block;

clear:both;

content:"";

visibillity:hidden;

height:0;

}

2. 父{

zoom:1; 为了兼容IE8以下的版本问题

}