您的位置：首页 > Web前端 > CSS

css如何清除浮动（四）

2017-04-11 00:00 239 查看

通过隔墙法，我们可以很方便的清楚浮动。下面我们再来介绍一种清楚浮动的方法：内墙法.

仍然是同样的例子。内墙法和隔墙法很相似，区别在于将这堵墙dis放在div1里面。通过设置这堵墙的clear：both来清除浮动，同样设置该div的height：10px,使div1与div2之间出现间距。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>内墙法</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

li{

float: left;

width: 120px;

height: 40px;

background-color: red;

list-style: none;

}

/*隔墙法*/

.clear{

clear: both;

}

.h10{

height: 10px;

}

.div1{

background-color: green;

}

</style>

</head>

<body>

<div>

<h3>清除浮动</h3>

<div class="div1">

<ul>

<li>html</li>

<li>css</li>

<li>js</li>

<li>jq</li>

<div class="clear h10"></div>

</ul>

</div>

<div class="div2">

<ul>

<li>方法</li>

<li>态度</li>

<li>面试</li>

</ul>

</div>

</div>

</body>

</html>

运行结果：

那么大家可能会有疑问，内墙法和隔墙法看起来有什么区别，那为什么要使用内墙法呢？

既然在隔墙法之后又出现内墙法，这就说明内墙法必然有比隔墙法优越的特点。

我们可以设置

.div1{

background-color: green;

}

运行之后，可以看到

可以看出此时div1是有高度的。

下面我们再来给大家举个例子来说明内墙法的优点

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>浮动</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

div{

background-color: red;

}

p{

/*设置浮动，父元素没有高就会消失*/

float: left;

width: 100px;

height: 100px;

background-color: green;

}

</style>

</head>

<body>

<div>

<p></p>

</div>

</body>

</html>

运行之后：

我们看到这页面上只显示p标签，而父元素div却没有显示出来。那这是为什么呢？

是因为父亲是不能被浮动的儿子撑出高度的。由于p标签设置了浮动，所以就不能撑出父元素div的高度，那么如何解决这种问题呢？

我们可以在div内部再设置一个div

html代码：

<div>

<p></p>

<div class="cl"></div>

</div>

css代码：

.cl{

clear: both;

}

运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 清除浮动

相关文章推荐

新的分享

章节导航