ul 下的li标签都浮动，那么ul的高度用两个css搞定

ul加入zoom:1;overflow:hidden;

ul {

zoom:1;

overflow:hidden;

}

标准流

标签按照规定好的默认方式排序
块级元素独占一行 从上向下顺序排列
div hr p h1-h6 ul ol form table

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

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            color: bisque;
            width: 300px;
            background-color: #c5708b;
        }

        h2 {
            color: #1677b3;
            width: 300px;
            background-color: #5698c3;
        }
    </style>
</head>

<body>
    <div>我是div</div>
    <h2>我是h2</h2>
</body>

</html>

为什么需要浮动嘞?

很多的布局效果,标准流没有办法完成,就需要利用到浮动完成布局.

浮动可以改变元素标签默认的排列方式

网页布局第一准则:

多个块级元素纵向排列找标准流

多个块级元素横向排列找浮动

⚾ 什么是浮动?⚾

float 属性用于创建浮动框
将其移动到一边,直到左边缘或者右边缘及包含块或者另一个浮动框的边缘

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

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            /* left 左浮动 right 右浮动 none 不浮动(默认) */
            float: left;
        }

        h2 {
            color: #1677b3;
            width: 300px;
            background-color: #5698c3;
        }
    </style>
</head>

<body>
    <div>我是div</div>
    <h2>我是h2</h2>
</body>

</html>

浮动特性

1.脱离标准普通流的控制移动到指定位置脱标

2.浮动的盒子不再保留原先的位置

3.多个盒子都设置浮动,按照属性值一行并排顶端对齐排列(不会有缝隙,多出另起一行对齐)

4.浮动元素会具有行内块元素特性(任何元素都可浮动)

如果块级盒子没有设置宽度,默认宽度和父级一样宽,添加浮动后,大小由内容决定
行内元素同理

5.浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

实战小技巧

为了约束浮动元素位置,网页布局一般采用的策略:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置

清除浮动

为什么要清除浮动?

由于父级盒子很多情况下,不方便给高度,但是的盒子浮动又不占位置,最后父级盒子高度为0时,就会影响下面的标准流盒子.

1.父级没有高度

2.子盒子浮动了

3.影响下面布局

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

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid #000;
        }
        div .child {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

清除浮动方法

清除浮动本质:

清除浮动元素脱离标准流造成的影响

清除浮动策略:

闭合浮动,只让浮动在父盒子内影响,不影响父盒子外面的其他盒子

1. 父级添加overflow 属性值设置hidden auto scroll

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

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            overflow: hidden;
        }
        div .child {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

弊端:无法显示溢出的部分

父盒子 500px 子盒子 600px (子盒子的100px被隐藏)

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

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            width: 500px;
            overflow: hidden;
        }
        div .child {
            color: bisque;
            width: 600px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

2.:after 伪元素法

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

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            width: 500px;
        }

        div .child {
            color: bisque;
            width: 240px;
            background-color: #c5708b;
            float: left;
        }

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE 6,7专有 解决兼容性问题 */
            *zoom: 1;
        }
    </style>
</head>

<body>
    <div class="father clearfix">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

3.双伪元素清除浮动

、纯文本的排列。

文档流就像我们的文本内容一样，所有的文字都会紧挨着，一个个排列下来，如果到了边界，就会换一行排列。当然如果敲回车或者按下空格键一般都会认为是一个词间距，因为英文中每个单词之间是有距离的，不像中文每个汉字连在一起的。所以不管你敲了几个回车，不管你敲了几个空格。程序都认为只有一个词间距的空格距离。我们把这种现象称为空白折叠现象。下图中的红色箭头就是我们敲了回车和敲了空格的效果。

2、文本和图片的排列

因为图文排版的原因，图片的宽度是一个整体。不像文字可以中间分开，因此在图文一起的时候我们会发现，图片作为文档流中的内容也是和一个文字元素一样，紧挨前一个文字，后面的文字也紧跟着图片。但是如果一行剩下的位置不够图片的宽度，就会自动换一行。

因为图片和一个文字元素一样，因此，图片的高度大于文字的高度，就会把这一行撑高，图片越高，行越高。在同一行的文字默认就会在图片的下端。如果你希望文字相对在图片的中间位置，那么就需要给图片设置一个CSS样式vertical-align: middle;注意一定是给图片设置，不是给文字设置。

当然如果我们设置两个张图，注意观察下面的两张图中间的缝隙，原因在于<img src=”img/1.jpg”>之间是换行的。根据上面文字的特征，这里必然也会产生一个空格

如何解决这个问题呢，起始有很多手段，最简单的是把两个标签连接写，不要换行

3、块元素和行内元素

刚才我们所说的都是行内元素，也就是内容添加后会自动放在一行，如果页面的剩余的宽度比要放入的元素小，那么就会自动换行。

除了文本和图片还有一些其他的HTML标签也是行内元素。例如:

行内元素

<span>...</span>行内元素

<a>...</a> 链接

<br> 换行

<b>...</b> 加粗

<strong>...</strong> 加粗

<img src="img/1.jpg"> 图片

<sup>...</sup> 上标

<sub>...</sub> 下标

<i>...</i> 斜体

<em>...</em> 斜体

<del>...</del> 删除线

<u>...</u> 下划线

<input type="text" title="文本"> 文本框

<textarea title="多行文本">...</textarea> 多行文本

<select title="下拉列表">...</select> 下拉列表

上面所有的行内元素，如果直接写在代码中都会存在同一行中。当然换行br会将后面的元素都放在另外一行了。

有时候我们希望一个内容可以自己独立成行。这样我们就有了块元素。块元素会独立成行，与行内元素做明显的区分。

例如：

<address></address>地址文字

<center>...</center> 居中

<h1>...</h1> 标题一级

<h2>...</h2> 标题二级

<h3>...</h3> 标题三级

<h4>...</h4> 标题四级

<h5>...</h5> 标题五级

<h6>...</h6> 标题六级

<hr> 水平分割线

<p>...</p> 段落

<pre>...</pre> 预格式化

<blockquote>...</blockquote> 段落缩进前后5个字符

<ul>...</ul> 无序列表

<ol>...</ol> 有序列表

<dl>...</dl> 定义列表

<table>...</table> 表格

<form>...</form> 表单

<div>...</div>块容器

块元素和行内元素具体有哪些区别呢。

行内元素

块元素

同行

输入行内元素，就会自动同行

输入块级元素，自动换行，并且独立占有一行，其它行内元素不会和它同行的。

设置宽高

行内元素部分内容是不可以设置宽高的，例如span容器,a超链接标签等等，当然有些还是可以通过CSS样式更改宽高的，例如input，img,textarea等非文字的标签

块元素直接可以设置宽高，如果没有设置就会根据该元素的父级容器的宽自动设置100%，高度是根据内容撑开的，如果没有内容，块元素默认高度是0，这点很重要。

4、行内元素和块元素的互相转换

行内元素和块元素可以互相转换的，例如：

(1) 行内元素转换为块元素

这是默认的行内元素

这是转换后的。我们发现文字块换行了，而且独立占有一行，在这里我们设置display:block

(2) 块元素转换为行内元素

这是默认的div的块元素样式

设置为行内元素后。我们发现宽高失效了。一旦块级元素设置为行内元素，原来设置的宽高就会失效

(3) 块元素和行内元素转换为行内块元素

有时候我们想让容器（不是textArea或者input）既有宽高又可以排列在同一行中，我们可以转换为行内块容器。尤其是我们希望将多个不同宽高的容器放在同一行中，并且可以通过margin调节他们的位置（注意：行内元素不能通过margin调节垂直位置，因为他们都是同一行的），这时候行内块元素就非常有必要了。

块元素变成行内块元素

行内元素变行内块元素

我们发现这两个效果都是一样的。

大家可能觉得这样很棒了，我们可以利用图文混合排列做成网页了，但是注意我们转换成了行内块元素，他们就是在行内了，任何一个更改了marginTop都会撑开了行高。就会变成这样：

到此为止我们就认识了标准的文档流，如果想在这种标准文档流中排版出复杂的图文混排，那基本上很难。因此我们就要学习浮动。浮动就是让容器脱离了这个标准文档流，就像浮动在页面上一样。关于这个问题，我们在下一篇中详细介绍。

在线咨询

上一篇：CSS3图片翻页动画（10种动画特效源码）
下一篇：关于HTML5，一位前端工程师推荐你应该读的书都在这里了！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商