CSS笔记11 - 浮动

1.浮动的定义及作用
定义:
float属性用于创建浮动框,将其移动到一遍,直至触及父盒子的边缘或者另外一个浮动框的边缘.

作用:
将多个块级盒子水平排成一列.

准则:
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动.

语法:

选择器 { float: 属性值; }

属性值	描述
none	不浮动(默认)
left	左浮动
right	右浮动

2.浮动的特性

• 浮动元素会脱离标准流(脱标),浮动的盒子不再保留原先的位置
• 浮动的元素会一行内显示并且元素顶部对齐
• 浮动的元素具有行内块元素的特性

3.浮动元素与标准流父级元素搭配使用
为了约束浮动元素的位置,网页布局一般采取的策略是:
先用标准流的父元素排列上下位置,再用内部的子元素进行浮动排列.

demo:

        .box {
            width: 500px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto;
        }
        
        .box div {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
        
        .box div:nth-child(2n) {
            background-color: yellow;
        }

    <div class="box">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>

效果:

4.浮动布局的注意点

• 浮动和标准流的父盒子搭配: 先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置.
• 一个元素浮动了，理论上其余的兄弟元素也要浮动:一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题.
• 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

5.文章参考链接
a. https://www.boxuegu.com/
b.https://blog.csdn.net/hecr_mingong/article/details/109788893