CSS-float 特性及应用总结

1.      float的结果

包裹、坚挺、隔绝、破坏

2.      清除浮动带来的影响

方法：浮动元素底部加 clear:both 的空div（margin重叠）

            父元素BFC化（无margin重叠）

            .clearfix:after{

                  content:“”;

                  display:block;

                  height:0;

                  overflow:hidden;

                  clear:both;

}

.clearfix{

         *zoom:1;

}

或

.clearfix:after{

         content:“”;

         display:table;

         clear:both;

}

.clearfix{

         *zoom:1;

}

3.      浮动的滥用

浮动后：block化及去空格，使得浮动适合砌砖头。但是这样布局容易造成页面块滑动，而且每个块大小必须固定。

4.      用浮动实现流体布局

4.1   单侧固定，另一侧自适应布局（左浮动）

左侧（固定）：width，float:left/float:right

右侧（自适应）：padding-left/margin-left/padding-right/margin-right

4.2   单侧固定，另一侧自适应布局（右浮动）

左侧（自适应）：把需浮动元素外包裹一层div：width：100%; float:left;

                               需浮动元素：margin-right:左与右需空出的大小+右侧固定元素大小;

右侧（固定大小）: width:右侧固定元素大小; float:left; margin-left:-右侧固定元素大小;

4.3   两侧自适应布局

	
	
	


  
  
  

    
12月25日为本月最后一个周五，按照惯例，图书馆将进行内部学习。12月25日（周五）下午闭馆，晚上5点照常开放，望广大师生读者周知。