网页布局实战

文档流

想要让元素再水平方向排列，我们需要设置布局模块浮动。

浮动是元素排列的一种方案。他有很多特点。跟普通布局不一样

标准文档流

目前学习标签分为两类：

块标签：布局，独占一行
行标签：填充内容

排列元素的时候，默认的排列规则就是按照块独占一行，行标签共享一行空间

称为标准文档流

多个块元素想要再一行显示的时候，无法实现

脱离文档流

不按照标签文档流的规范来进行页面元素排列，按照新的规则来排列

一般针对局部空间。

浮动布局是你们以后开发用的非常多的一种布局方式

特点：

只要给元素设置浮动，当前这个元素脱离文档流。(排列规则不再受标准文档流约束。原来空间不在)
浮动的元素前面有标准文档流规则，不影响前面元素，影响后面的元素
所有浮动的元素，按照给定的方向一个接着一个排列。
浮动是可以设置方向，left、right。按照顺序移动元素。先浮动先填放位置
浮动的元素在一行显示不下的情况，自动换上显示（默认按照指定顺序排列）

案例一

浮动属性

float:left; 左浮动
float: right; 右浮动

作用是把多个盒子排版到同一排只有需要把当前的盒子和其它盒子放到同一排时，才需要给当前盒子加float浮动

浮动布局遇到的问题

给盒子加float属性后，会让当前盒子漂浮起来，当前盒子就脱离正常的文档流,可能会造成父容器高度塌陷

清除浮动的方案

作用是清除浮动对父元素的影响，让当前的盒子不会挤到上面

给这个大盒子一个固定高度就可以清除浮动造成的影响

在浮动盒子的末尾，再加一个空div, 用于清除当前盒子浮动的影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big { border: 3px solid purple; }
        .s1 { width: 200px; height: 400px; 
            background: #087; float: left;}
        .s2 { width: 200px; height: 200px;
             background: #f90; float: left}
    </style>
</head>
<body>
    <div class="big">
        <div class="s1"></div>
        <div class="s2"></div>
        <!-- 在大盒子子级的末尾加一个专用的div -->
        <div style="clear: both;"></div>
    </div>
    123123123
</body>
</html>

可以在大盒子上加一个伪元素::after,用这个伪元素去完成清除浮动，::after 可以在一个标签的末尾再创造一个假元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 浮动解决方案3 -->
    <style>
        .header{
            width: 100%;
            /* BFC盒子：封闭盒子，盒子内部所有操作都不影响外部盒子 */
            /* overflow: hidden; */
            border: 1px solid green;
        }
        .header .left{
            width: 200px;
            height: 80px;
            background-color: pink;
            float: left;
        }
        .header .right{
            width: 300px;
            height: 100px;
            background-color: tomato;
            float: right;
        }
        .content{
            width: 100%;
            height: 400px;
            background-color: orange;
        }
        /* .header .box{
            清除浮动带来的元素影响
            clear: both;
        } */
        
        /* 只要发现盒子内部要浮动，父盒子增加一个class =“clearfix” 默认在父盒子最尾部添加div  */
        .clearfix::after{
            content:"";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="header clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 清除浮动对元素的影响 -->
        <!-- <div class="box"></div> -->
    </div>
    <div class="content"></div>
</body>
</html>

案例二

贯穿案例

蜗牛家居首页布局

Day03-网页布局实战-浮动