一、HTML元素的分类

1、块元素

块元素的特点是，一个元素占据了页面一整行的空间。

常见的块元素有：h1、h2、h3、h4、h5、h6；p；div；ul；li...

举个栗子~

（1）像我们之前做过的练习中，不知道小伙伴们有没有注意到，每个h1标签都是独占一行的。

        我们将h1标签的边框显示出来：

    <h1>hello world</h1>
    <h1>hello world</h1>

    <style>
        h1{
            border: 1px solid red;
        }
    </style>

（2）并且，块元素可以设置宽度和高度。

    <h2>hello world</h2>
    <h2>hello world</h2>

        h2 {
            border: 1px solid red;
            width: 200px;
            height: 100px;
        }

可以看到，块元素的宽度和高度可以自定义。

2、行内元素

行内元素没有独占一行。

常见的行内元素有：a；span...

举个栗子！

    <span>hello world</span>
    <span>hello world</span>

        span{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }

我们发现：

        <span>标签（行内元素标签），并没有独占一行，而是共用一行。

        尽管设置了宽和高，他们的大小仍然不变。

3、行内块元素

常见的行内块元素有input；button；img...

什么叫行内块元素呢？顾名思义，就是既有块元素的特点，又有行内元素的特点。

行内元素既可以设置宽高（块元素的特点），又不会独占一行（行内元素的特点）。

通俗点来说，行内块元素，它像块元素一样，但又不像块元素独占一行那样的霸道，而是和好兄弟共用一行。

举个例子~

    <img src="../picture/head.jpg" alt="">
    <img src="../picture/head.jpg" alt="">

        img {
            width: 100px;
            height: 100px;
        }

如图所示，可以设置宽高，但没有独占一行。 

二、提出问题

同学们看到到这里能不能提出一些问题呢？

脑子转的快的同学就会问了：

        块元素不能并列一行，那怎么实现侧边栏的效果？

        行内元素不能设置宽高，那我的页面岂不是很丑？

        等等....

好了，同学们能想到的，牛人们都已经想到了，于是乎~

当当当当，出来了一个display属性。

三、display属性

1、block（块元素）——常用

将元素转换为块元素（块元素，可以设置宽高了）。

2、inline（行内元素）

将元素转换为行内元素（行内元素，可以共用一行了）。

3、inline-block（行内块元素）

4、none（隐藏元素）

好，我们现在进入今天的主题：浮动布局。

四、浮动布局（重难点）

顾名思义，将元素浮起来，就好像冰块浮在水面上一样。浮动的元素，也是浮在页面上层。

    <div class="content">
        内容
    </div>
    <div class="aside">
        边栏
    </div>

        .content {
            width: 300px;
            height: 200px;
            border: 1px solid red;
            float: left;
        }

        .aside{
            width: 100px;
            height: 200px;
            border:1px solid blue;
            float: left;
        }

我们进一步来理解什么是浮动布局。

我们再加入一个背景色为黄色的div，看看会发生什么？

    <div class="content">
        内容
    </div>
    <div class="aside">
        边栏
    </div>
    <div class="box"></div>

        .content {
            width: 300px;
            height: 200px;
            border: 1px solid red;
            float: left;
        }

        .aside {
            width: 100px;
            height: 200px;
            border: 1px solid blue;
            float: left;
        }

        .box {
            width: 400px;
            height: 400px;
            background-color: yellow;
        }

我们看完这个案例之后，再来思考我刚刚说的：浮动布局，就好像冰块浮在水面上一样，浮动的元素也浮在页面上。

content的<div>和aside的<div>，都设置了浮动，所以，他们浮在了页面上，不占据页面的文档流，脱离了文档流。所以，在页面看来，这两个div容器并没有占据页面的空间，所以，当我们再放入一个div时，它是从（0，0）坐标开始的。

但是，这就带来难题了，因为这几个元素在视觉上重叠了，一旦重叠，看到的数据也是重叠的。

那如何解决重叠问题呢？

我们想将这个黄色背景的<div>放在他们下面，该怎么做呢？ 

我们来看新知识点：清除浮动。

五、清除浮动

1、在浮动元素后加上一个空的div，设置clear:both

    <div class="content">
        内容
    </div>
    <div class="aside">
        边栏
    </div>
    <div class="clear"></div>
    <div class="box"></div>

        .content {
            width: 300px;
            height: 200px;
            border: 1px solid red;
            float: left;
        }

        .aside {
            width: 100px;
            height: 200px;
            border: 1px solid blue;
            float: left;
        }

        .box {
            width: 400px;
            height: 400px;
            background-color: yellow;
        }

        .clear{
            clear: both;
        }

效果如下：

浮动已清除。

 但是这种方法，既不方便，也违背了html的初心（html是用作页面的布局）。

那我们再来看另一种清除浮动的方法。

2、利用伪元素选择器，添加空div，并设置【clear:both】

    <div class="container clear">
        <div class="content">
            内容
        </div>
        <div class="aside">
            边栏
        </div>
    </div>
    <!-- <div class="clear"></div> -->
    <div class="box"></div>

        .content {
            width: 300px;
            height: 200px;
            border: 1px solid red;
            float: left;
        }

        .aside {
            width: 100px;
            height: 200px;
            border: 1px solid blue;
            float: left;
        }

        .box {
            width: 400px;
            height: 400px;
            background-color: yellow;
        }

        /* .clear{
            clear: both;
        } */

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

关键点：

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

其实现原理，与第一点一样。都是设置一个空的div来清除浮动。只不过是使用选择器来添加空的div而已。

这样做的好处是：如果后面还有想要清除浮动的地方，只需要添加一个父div容器，并设置class="clear"即可。

六、设计一个布局

1、效果图

2、代码

<!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">
    <link rel="stylesheet" href="Demo05.css">
    <title>Demo05</title>
</head>

<body>
    <ul class="list">
        <li class="clear">
            <div class="pic">
                <img src="../picture/前端.jpg" alt="">
            </div>
            <div class="title">
                <h3>前端开发学习手册</h3>
                <p>2020.2.2</p>
                <a href="">阅读</a>
            </div>
        </li>
        <li class="clear">
            <div class="pic">
                <img src="../picture/java.jpg" alt="">
            </div>
            <div class="title">
                <h3>Java学习手册</h3>
                <p>2020.2.2</p>
                <a href="">阅读</a>
            </div>
        </li>
        <li class="clear">
            <div class="pic">
                <img src="../picture/php.jpg" alt="">
            </div>
            <div class="title">
                <h3>php学习手册</h3>
                <p>2020.2.2</p>
                <a href="">阅读</a>
            </div>
        </li>
    </ul>
</body>

</html>

* {
    margin: 0px;
    padding: 0px;
}

.list .pic img {
    width: 200px;
    height: 150px;
}

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

.pic {
    width: 200px;
    float: left;
}

.title {
    width: 300px;
    float: left;
}

.title a {
    display: block;
    width: 80px;
    height: 30px;
    background-color: pink;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
}

 3、分析

（1）该布局由三个<li>标签组成。

（2）每个<li>标签内，图片与右侧文字先浮动，再清除浮动。（思考一下：如果不清除浮动，会是什么效果？）