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

ul加入zoom:1;overflow:hidden;

ul {

zoom:1;

overflow:hidden;

}

动是css里面布局用的最多的属性。

一个span标签不需要转成块级元素, 就能够设置宽度、高度了。所以能够证明一件事儿, 就是所有标签已经不区分行内、块了。

也就是说, 一旦一个元素浮动了, 那么, 将能够并排了, 并且能够设置宽高了, 无论它原来是个div还是个span。

浮动的性质：脱标、贴边、字围、收缩。

浮动的元素脱标

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
    float: left;
    width: 300px;
    height: 400px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 400px;
    height: 400px;
    background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

两个元素并排了, 并且两个元素都能够设置宽度、高度了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
span{
    float: left;
    width: 200px;
    height: 200px;
    background-color: orange;
}
</style>
</head>
<body>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</body>
</html>

一个span标签不需要转成块级元素, 就能够设置宽度、高度了。所以能够证明一件事儿, 就是所有标签已经不区分行内、块了。

也就是说, 一旦一个元素浮动了, 那么, 将能够并排了, 并且能够设置宽高了, 无论它原来是个div还是个span。

浮动的元素互相贴靠

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
body{
    font-size: 60px;
}
.box1{
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 120px;
    height: 220px;
    background-color: gold;
}
.box3{
    float: left;
    width: 340px;
    height: 300px;
    background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

浮动的元素有"字围"效果

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
float: left;
width: 344px;
height: 516px;
background-color: orange;
}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" alt="" />
</div>
<p>123文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p>
</body>
</html>

div挡住了p, 但是p中的文字不会被挡住, 形成"字围"效果。如果将p标记换成div, 则不会有"字围"效果。

详细案例见：CSS|实例|图文混排

收缩：一个浮动的元素, 如果没有设置width, 那么将自动收缩为文字的宽度(这点非常像行内元素)。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
float: left;
background-color: gold;
}
</style>
</head>
<body>
<div>我是文字</div>
</body>
</html>

浮动的清除

实验：现在有两个div, div身上没有任何属性。每个div中都有li, 这些li都是浮动的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
li{
float: left;
width: 90px;
height: 40px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

我们本以为这些li, 会分为两排, 但是, 第二组中的第1个li, 去贴靠第一组中的最后一个li了。

第二个div中的li, 去贴第一个div中最后一个li的边了。

原因就是因为div没有高度, 不能给自己浮动的孩子们, 一个容器。

清除浮动方法1：给浮动的元素的祖先元素加高度。缺陷: 只限于父元素高度确定的情况下。

如果一个元素要浮动, 那么它的祖先元素一定要有高度。高度的盒子, 才能关住浮动。

解决方法:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
div{
height: 50px; /* 为父元素设置高度 */
border: 1px solid #000;
}
li{
float: left;
width: 90px;
height: 40px;
margin-right: 10px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

清除浮动方法2：clear:both;

网页制作中, 高度height很少出现。为什么? 因为能被内容撑高! 那也就是说, 刚才我们讲解的方法1, 工作中用的很少。

脑弄大开：能不能不写height, 也把浮动清除了呢? 也让浮动之间, 互不影响呢?

clear:both;

clear就是清除, both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。

这种方法有一个非常大的、致命的问题, margin失效了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
li{
float: left;
width: 120px;
height: 40px;
text-align: center;
background-color: orange;
}
.box2{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

清除浮动方法3：隔墙法

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h8{
height: 8px;
_font-size:0;
}
.h10{
height: 10px;
_font-size:0;
}
.h12{
height: 12px;
_font-size:0;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>

<div class="cl h8"></div>
<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

墙! <div class="cl h18"></div>

这个墙, 隔开了两部分浮动, 两部分浮动, 互不影响。

近些年, 有演化出了"内墙法"：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h16{
height: 16px;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
<div class="cl h16"></div>
</div>
<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

内墙法本质-给没有高的父亲撑出高

因为一个父元素不可能被浮动的子元素撑出高度, 解决的方法：内墙法

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
background-color: blue;
}
p{
float: left;
width: 100px;
height: 100px;
background-color: green;
}
.cl{ /* 如果没有清除浮动 , 则父元素的盒子没有高度, <div>盒子只是一条线*/
clear: both;
}
</style>
</head>
<body>
<div>
<p></p>
<div class="cl"></div>
</div>
</body>
</html>

清除浮动方法4：overflow:hidden;

overflow就是"溢出"的意思, hidden就是"隐藏"的意思。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</body>
</html>

本意就是清除溢出到盒子外面的文字。但是, 前端开发工程师又发现了, 能做偏方。

一个父亲不能被自己浮动的儿子，撑出高度。但是, 只要给父亲加上overflow:hidden; 那么, 父亲就能被儿子撑出高了。这是一个偏方。

div{
    width: 400px;
    border: 10px solid black;
    overflow: hidden;
}

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
overflow: hidden;
border: 10px solid black;
}
.p1{
float: left;
width: 100px;
height: 150px;
background-color: red;
}
.p2{
float: left;
width: 100px;
height: 380px;
background-color: yellow;
}
.p3{
float: left;
width: 100px;
height: 120px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
</div>
</body>
</html>

浮动清除方法5: 利用伪元素清除浮动

我们知道css中最重要的就是浮动了，一张网页结构布局，用的最多的就是浮动了，现在大多数的网站网页结构都是浮动布局了，不像早些年的表格布局。所以学好浮动对我们的开发很重要。

浮动是什么？可能很多人的理解都不一样，我们来看看w3c对浮动的解释是什么

大多数小伙伴听得最多的可能就是浮动流，下面我们就来讲讲什么是浮动流以及清除浮动。

首先，我们知道，在一张网页中的正常布局流向（排列方式）都是从左到右，从上到下的方式排列。这个我们称之为标准文档流。那什么是浮动流呢？

浮动浮动浮动 ==> 因为有个浮字，我们可以理解为浮起来了一样。就好比标准文档流在地下排流，浮动流在天空上排流。简单看个例子。

这是两个正常排列的div，div独占一行，就不用多说了吧。然后我们给小的方块加一个浮动

然后我们再看效果

然后我们就看到大方块在小方块下面，因为小方块跑天上去了，它就不占据原来的位置，会把那个位置空出来，所以大方块会窜上去，就看起来两个方块重叠了。

在看另外一个例子，子级浮动，父级高度撑不开的问题，这也是浮动带来的一个不好的影响，平常写代码的时候会经常遇到这个。

一个ul标签，下面两个li标签，然后给ul加一个边框便于观看。

保存运行看下正常效果

然后我们给li标签浮动

效果如下

这下我们看到ul的高度没有了，上下边框紧紧挨着，这就是刚刚上面说的浮起来的状况，因为子级li标签浮动起来了，它不占据原来的位置，它已经在天上了，所以它的父级ul标签包不住它，撑不起来高度，才会产生这种状况。

那我们要怎么解决这种现象呢。就是清除浮动。

大致分为4种方案：

1、在并列的子元素，最后加一个元素，给他加clear：both

2、给父子加一个class： clearfix

.clearfix::after{

content: '';

clear: both;

display: block;

}

3、让父级触发BFC效果

position:absolute

display:inline-block

float：left|right

overflow：hidden

4、如何浮动的父级本身就是浮动元素吗，那么不用清除浮动了

咱们就来给父级触发BFC效果看一下。

看效果

现在父级就把子级包裹住了，高度也有了。

有什么问题可以点一下关注，私信小编。

在线咨询

上一篇：传统ISV进场，MolyApp的HTML5生意是让商户、明星商城快速构建线上营销和支付渠道
下一篇：11.HTML图片格式与优化

您的项目需求

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

整合营销服务商

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

您的项目需求