行内元素加了浮动后就会具有行内块元素的特点
ul ol li 都是块级元素
ul 可以设计一行多个盒子的界面

例如

小米页面

在写子选择器时时，最好带上副选择器，如果不带，可能会因为权重的问题，不被执行

例如

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;
            margin: 0 auto;
        }

        .box li {
            width: 296px;
            height: 285px;
            background-color: purple;
            float: left;
            margin-right: 14px;
        }
        /*这样才对。只写一个last不行*/
        .box .last {
            margin-right: 0 ;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</body>

</html>

清除浮动

清除浮动的本质：

  • 1 清除浮动的本质是清除浮动造成的影响
  • 2 如果父盒子有高度，则不需要清除浮动
  • 3 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

清除浮动的方法：

  • 1 额外标签法：就是在最后一个浮动的子元素后面加上一个额外的块级元素标签，添加清除浮动样式
  • 2 给父元素添加overflow 属性
  • 3 :after 伪元素法
  • 4 双伪类元素清除法。

例1：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box .clear {
            clear: both;
        }

        .box div {
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
        <div class="clear"></div>
    </div>
</body>

</html>

例2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            overflow: hidden;
        }

        .box div {
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
        <div class="clear"></div>
    </div>
</body>

</html>

例3:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

        .box div {
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>

    </div>
</body>

</html>

例4

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix:after,
        .clearfix::before {
            content: "";
            display: table;
        }

        .clearfix {
            *zoom: 1;
        }

        .box div {
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>

    </div>
</body>

</html>

css 的书写顺序：

  • 布局定位属性：display / position / float / clear / visibility /overflow (建议display 先写)
  • 自身属性：width / height / margin / padding / border / background
  • 文本属性: color / font / text-decoration / text - align / vertical -align / white - space / break -world
  • 其他属性：content / cursor /border - radius / box - shadow / text -shadow

    页面布局的整体思路：

  • 必须确定页面的版心（可视区），我们测量得知
  • 分析页面中的行模块，以及行模块中的列模块，

若盒子的内装的是文字，而文字的多少又不确定的时候，可以给盒子一个左右padding 值，让文字自动撑开盒子