CSS-布局方式之Float布局

1.float布局特性：

• 浏览器有水平排版和垂直排版两种方式，float布局采用水平排版方式，float取值只有left和right。

• 使用float布局会脱离标准流，元素使用float属性，其后面的元素会向上移动，被浮动与元素挡住。

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

• 在浮动流中，行内元素也能设置宽度和高度；

2. 浮动顺序:

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

3.父元素会失去高度

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

清除浮动方法：
1.父元素使用overflow:hide;

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>

标签：文字,浮动,元素,float,背景,布局,Float,CSS
来源： https://www.cnblogs.com/zhaofeng0000/p/16578430.html