【CSS】浮动

浮动

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

float

选择器 {
    float:属性值;
}

属性值	解释
none	不浮动
left	左浮动
right	右浮动

两个div用inline属性时之间会有间隔，用float则不会有

float特性

1. 脱离标准普通流的控制（浮）移动到指定位置（动），俗称浮动
2. 浮动的盒子不再保留原来位置

浮动元素具有行内块元素特性

如果行内元素有浮动，则可以直接指定高度

先用标准流的父元素排列上下位置，之后再用内部子元素采用浮动排列左右位置，符合网页布局第一准则

浮动会影响后面的盒子

问题：父盒子不方便给高度，子盒子加浮动后父盒子高度就为0了

清除浮动

清除浮动元素脱离标准流造成的影响

clear:left;
	  right;
	  both;

清除浮动的4种方法

额外标签法

1. 在浮动元素末尾添加一个空的标签，如<div style="clear:both;"><\div>这新增的必须是块级元素

2. 父级元素添加overflow

   父级元素添加{overflow:hidden;}

3. :after 伪元素法

   .clearfix:after{
       content:"";
       dispaly:block;
       height:0;
       clear:both;
       visibility:hidden;
   }
   <--IE6.7专有-->
   .clearfix{			
       *200m;
   }
   

   给父级元素添加	class="clearfix"
   

4. 双伪元素清除浮动

   .clearfix:before,
   .clearfix:after{
       content:"";
       display:table;
   }
   .clearfix:after{
       clear:both;
   }
   .clearfix{
       *zoom:1;
   }
   

CSS书写顺序

建议遵循以下顺序

1. 布局位置属性：display\position\float\clear\visiblity\overflow
2. 自身属性：width\height\margin\padding\border\background
3. 文本属性：color\font\text-decornation
4. 其他属性：content\carsor\border-radius

实际开发中我们不会直接使用链接a，而是用li包含链接的做法