CSS-布局方式之Float布局

CSS-布局方式之Float布局（传统布局方式）

1.float布局特性：

• 浏览器有水平排版和垂直排版两种方式，float布局只能进行水平排版，float取值只有left和right，不能设置水平居中。

• 浮动布局不会影响前面的元素，只会影响当前元素以及后面元素的布局；元素使用float属性会脱离标准流，其后面的元素会向上移动，浮动的元素挡住会挡住其后面的元素。

• 在浮动流中，不能使用 margin：0 auto; 的方式实现水平中;

• 在浮动流中，不区分行内元素、块级元素以及行内块级元素，都能够设置宽度和高度；

2. 浮动顺序:

• 先浮动的元素排在前面，后浮动的元素排在后面；向左浮动的元素会排在上一个向左浮动的元素后面，向右浮动的元素会排在上一个向右浮动的元素后面。

 .left1{
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .left2{
        float: left;
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
    .right1{
        float: right;
        width: 100px;
        height: 100px;
        background-color: rgb(0, 110, 255);
    }
    .right2{
        float: right;
        width: 100px;
        height: 100px;
        background-color: rgb(255, 0, 64);
    }

 <div class="left1">left-first</div>
    <div class="left2">left-second</div>
    <div class="right1">right-first</div>
    <div class="right2">right-second</div>

效果图：

3.父元素会失去高度

• 由于父元素的高度默认是由子元素的高度撑起的，当子元素设置float属性后，会脱离标准流，导致父元素没有子元素来撑起高度，所以父元素会失去高度。这时需要清除浮动。

<style>
    .parents{
        background-color: red;
    }
    .son1{
        background-color: yellow;
        height: 100px;
        width: 100px;
    }
    .son2{
        background-color:green;
        height: 100px;
        width: 100px;
    }
</style>

  <div class="parents">
            <div class="son1"></div>
            <div class="son2"></div>
    </div>

此时父元素的高度被两个子元素的高度撑起，高度为200

<style>
    .parents{
        background-color: red;
    }
    .son1{
        background-color: yellow;
        height: 100px;
        width: 100px;
        float: left;
    }
    .son2{
        background-color:green;
        height: 100px;
        width: 100px;
        float: right;
    }
</style>

  <div class="parents">
            <div class="son1"></div>
            <div class="son2"></div>
    </div>

清除浮动方法：

1.对浮动元素的父元素使用overflow:hidden; 或者overflow:auto;为了兼容IE浏览器，需要对父元素设置：zoom：1；

.parents{
       background-color: red;
       overflow:hidden;
       zoom:1;
   }

2.在最后一个浮动元素后面再添加一个空元素，设置属性：clear:both;；（如果浮动布局使用较多，页面中会产生许多空的div元素）

<div class="parents">
            <div class="son1"></div>
            <div class="son2"></div>
            <div style="clear:both;"></div>
    </div>

clear:left;表示清除左浮动；clear:right表示清除右浮动；

3. 给浮动元素的父元素的height属性设置具体的值；(适用于父元素高度固定的布局)

parents{
        background-color: red;
        height:400px;
    }

4. 采用css的:after伪元素法，在父元素后面添加看不见的块级元素来清除浮动。(兼容性最好)

.parents:after{
        content:"";
        display:"block";
        height:0;
        clear:both;
        visibility:hidden;
  }
  .parents{
      zoom:1;
  }

4.浮动元素贴靠现象

• 如果父元素的宽度能够放下所有浮动元素，则所有浮动元素按照先后顺序排列在一行

• 如果父元素的宽度不能容纳所有元素，就会发生元素贴靠现象。假设父容器的宽度不能放下最后一个元素，最后一个元素就会找到前一个浮动方向相同的元素贴靠在一起；如果此时父元素还是不能放下最后一个元素，最后一个元素会继续贴靠在前面的前面的元素后，会依次按照从后往前的顺序贴靠，直到能够放下当前元素为止。

5.浮动字围现象

浮动元素不会挡住非浮动元素中的文本内容。例如：某元素浮动在有许多文

字内容的元素上面，该浮动元素不会遮挡背后的元素的文字内容，文字会自

动围绕在浮动元素周围。

<style>
    .bg{
       background-color: yellow; 
       width: 300px;
       height: 340px;

    }
    .float-left{
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

   <div class="float-left">浮动元素</div>
    <div class="bg">
        明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
        转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
    </div>