float布局

float的特性：

　　1. 元素‘浮动’

　　2. 脱离文档流

　　3. 但不脱离文本流

 float 对自身影响：

　　1. 形成“块”（BFC），可设置宽高

　　2. 位置尽量靠上

　　3. 位置尽量靠左(右)

 float 对兄弟影响：

　　1. 一般上面贴非float元素

　　2. 旁边贴float元素

　　3. 不影响其它块级元素位置

　　4. 影响其它块级元素内部文本（3/4点即：脱离文档流，不脱离文本流）

 float 对父级元素影响：

 　　1. 从布局上“消失”

　　 2. 高度塌陷

 　　解决高度塌陷方法：

　　　　i. overflow:auto/hidden

　　　　ii. 伪元素

　　　　　　.self-float::after{

　　　　　　　　content:'';
　　　　　　　　display: block;
　　　　　　　　clear: both;
　　　　　　　　visibility:hidden;
　　　　　　　　height:0;
　　　　　　}

float两栏布局

 

三栏布局

　　一般情况是：左右固定宽度，中间自适应。常用的布局方式有：

　　方法1. float布局

　　　　原理：左右两栏浮动后，脱离文档流，后面的元素受浮动影响，中间栏自动插入到左右两栏的中间，利用margin值控制两边的间距即可。

　　　　所以将中间栏放在最后，否则右侧会沉在中间栏的下侧　　　　

<!--float自身浮动-->
        <div class="self-float">
            <div class="left">左侧固定宽度</div>        
            <div class="right">右侧固定宽度</div>
            <div class="middle">中间宽度自适应</div>
        </div>

*{
    margin: 0;
    padding: 0;
}
.self-float{
    padding: 20px;
    background-color: gray;
}
.left{
    width: 200px;
    height: 100px;
    float: left;
    background-color: pink;
}
.right{
    width: 200px;
    height: 100px;
    float: right;
    background-color: skyblue;
}
.middle{
    height: 100px;
    margin: 0 220px;
    background-color: yellow;
}

　　

　　注意：

　　1. margin: 0 220px; 

　　　middle样式如果不设置 margin-left & margin-right这2个属性,内容较多的时候会出现如下情况

　　

 　　2.使用float时，为了不影响其他元素的显示，需要清除浮动，例如使用伪元素的方式：

.self-float::after{
    content:'';
    display: block;
    clear: both;
}

　　方法2. absolute定位

　　　　分2种：

　　　　第1种 原理：左右栏使用absolute定位后会脱离文档流；后面的中间栏会自然流动到它们上面，中间栏通过左右margin值撑开距离。

　　　　这种方式仍将中间栏放在最后，否则中间栏也要进行绝对定位　

<div class="absolu-layout">
            <div class="left">左侧绝对定位</div>        
            <div class="right">右侧绝对定位</div>
            <div class="middle">中间栏通过左右margin距离来适应宽度</div>
        </div>

*{
    margin: 0;
    padding: 0;
}
.absolu-layout{
    padding: 20px;
    position: relative;
    background-color: gray;
}
.left{
    width: 200px;
    height: 100px;
    position: absolute;
    left: 20px;
    background-color: pink;
}
.right{
    width: 200px;
    height: 100px;
    position: absolute;
    right: 20px;
    background-color: blue;
}
.middle{
    height: 100px;
    margin: 0 220px;
    background-color: yellow;
}

　　

 　　第二种原理：左右中三栏都进行绝对定位（全部脱离文档流），中间栏通过left和right来进行定位。这时左中右栏在html中顺序可以是任意的，没有先后之分

<div class="absolu-layout">            
            <div class="left">左侧绝对定位</div>        
            <div class="middle">中间栏通过left和right来进行定位</div>            
            <div class="right">右侧绝对定位</div>        
        </div>

*{
    margin: 0;
    padding: 0;
}
.absolu-layout{
    padding: 20px;
    position: relative;
    background-color: gray;
}
.left{
    width: 200px;
    height: 100px;
    position: absolute;
    left: 20px;
    background-color: pink;
}
.right{
    width: 200px;
    height: 100px;
    position: absolute;
    right: 20px;
    background-color: blue;
}
.middle{
    height: 100px;
    left:240px;
    right:240px;
    position: absolute;
    background-color: yellow;
}