css (4) 脱离文档流 - float浮动

  

脱离文档流的三种方法：float: .... 　　/ position: absolute; 　　/ position:relative; 

 

浮动　　

　　浮动的元素不能撑高父元素.

　　浮动的元素脱离标准流，没有标准流的inline / block之分了

　　margin塌陷是标准流的性质，因为浮动脱标了 竖直方向上的margin塌陷现象消失

 　   图片 img 标签进行float，则会出现图文混排效果。

　　

　　浮动之后无法撑起来父元素:  

　　　　overflow:hidden； 解决这个问题  （触发 BFC 条件）　

 

　　　　清除浮动方法1：clear:both  

　　　　　　　　这个东西不好用，原因是：

 

　　　　　　　　　　1） box还是没有高

 

　　　　　　　　　　2） margin失效

 

 

 

　　　　清除浮动方法2：隔墙

1    <div class="box1">
2        <p>1</p>
3        <p>2</p>
4        <p>3</p>
5        <p>4</p>
6    </div>
7    <div class="cl h20"></div>
8    <div class="box2">
9        <p>1</p>
10        <p>2</p>
11        <p>3</p>
    </div>

 

 

 

 

 　　　　清除浮动方法3：内墙法

 

 

1    <div class="box1">
2        <p>1</p>
3        <p>2</p>
4        <p>3</p>
5        <p>4</p>
6        <div class="cl"></div>
7    </div>
8    
9    <div class="box2">
10        <p>1</p>
11        <p>2</p>
12        <p>3</p>
13        <div class="cl"></div>
    </div>

 

 

 

　　　　

工作中：

 

1） 给内部有浮动的父盒子加上overflow:hidden;

 

2)   在两个大部分之间隔外墙

 

1 <div class="header">

2 

3 </div>

4 <div class="cl h18"></div>

5 <div class="content">

6 

7 </div>

8 <div class="cl h18"></div>

9 <div class="footer">

10 

11 </div>

 

 更好的做法使用伪类

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