HTML(18)——浮动

标准流 

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个

浮动

作用：让块级元素水平排列

属性名：float

属性值

• left：左对齐
• right：右对齐

特点：

1. 浮动后的盒子顶对齐
2. 浮动后的盒子具备行内快的特点
3. 父级宽度不够，浮动的子级会换行
4. 浮动后的盒子脱标

示例：

我写了两个块级元素如下图：

        .one {

            width: 100px;

            height: 100px;

            background-color: aqua;

        }

        .two {

            width: 200px;

            height: 200px;

            background-color: chocolate;

        }

两个类里面都写上float:left

        .one {

            width: 100px;

            height: 100px;

            background-color: aqua;

            float: left;

        }

        .two {

            width: 200px;

            height: 200px;

            background-color: chocolate;

            float: left;

        }

如果只给一个块添加float属性：

        .one {

            width: 100px;

            height: 100px;

            background-color: aqua;

            float: left;

        }

        .two {

            width: 200px;

            height: 200px;

            background-color: chocolate;

        }

这是因为one设置了float脱离了标准流，相当于浏览器找不到one这个块,导致two也出现在左上角。

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决办法：清除浮动 （并不是把浮动删除）

示例：

    <style>
        .top {
            margin: 10px auto;
            width: 1200px;
            height: 300px;
            background-color: pink;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }

        .right {
            float: right;
            width: 950px;
            height: 300px;
            background-color: orange;
        }

        .bottom {
            height: 100px;
            background-color: brown;
        }
    </style>

    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>

效果如图：

当把父级的高度删除：

发现bottom出现在顶上。当top没有height,只能靠元素撑开，但由于两个块都是float，所以影响到了整个页面的布局效果

 清除这种影响有四种方法：

额外标签法

在父级元素内容的最后添加一个块级元素，设置属性clear:both

    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div style="clear:both"></div>
    </div>

 单伪元素法

原理和额外标签法是一样的，额外标签法是人工加标签，该方法是通过伪元素。

也是给父级最后添加块级元素。

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}

    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>

双伪元素法

.clearfix::before,
.clearfix::after{
  content:"";
  display:table;
}
.clearfix::after{
  clear:both;
}

    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>

before伪元素是解决外边距塌陷问题。

overflow

父级添加属性overflow:hidden;