CSS-布局方式之Float布局

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>

原文地址:https://www.cnblogs.com/zhaofeng0000/p/16578430.html