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

css中的浮动以及如何清除浮动

2017-08-16 14:02 561 查看

在平时的开发过程中，我们往往会遇到一个问题，无法将块元素（block）居右，并且在行内块元素（inline-block）出现之前，像div这样独占一行的块元素，我们很难有办法将它们排成一行，今天就来谈谈如何将块元素居右显示。

浮动（float）就是这样一个可以解决问题的属性，什么是浮动呢？其实也就一句话：浮动元素会脱离文档流，可以向左或者向右浮动，直到碰到父元素或者另一个浮动元素。在这句话中，我们可以发现浮动元素的几个特性——会脱离文档流，可以向左向右浮动。下面，就让我们看看如何浮动的效果：

1.浮动元素可以向左向右浮动：

这是没有设置浮动的： 请看实例————————>点击打开链接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="images/favicon1.ico"/>
<title>北晨的博客—float浮动</title>
<style type="text/css">
*{margin:0px;padding:0px;}
h1{margin-top:30px;text-align: center;}
.box1,.box2{width:100px;height:100px;}
.box1{background-color:red;}
.box2{background-color:blue;}
</style>
</head>
<body>
<h1>未浮动</h1>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>

这是设置了浮动的： 请看实例————————>点击打开链接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="images/favicon1.ico"/>
<title>北晨的博客—float浮动</title>
<style type="text/css">
*{margin:0px;padding:0px;}
h1{margin-top:30px;text-align: center;}
.box1,.box2{width:100px;height:100px;}
.box1{background-color:red;float:left;}
.box2{background-color:blue;float:right;}
</style>
</head>
<body>
<h1>浮动</h1>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>

在没有设置浮动的情况下，两个div元素是独占一行的，在设置了浮动之后，两个div元素在同一行，一个在左，一个在右。这就是浮动的特点，可以脱离文档流显示，两个块元素不再会像之前一样，霸道的占领一行。但是，浮动虽然避免了块元素独占一行的特性，并且可以居左或者居右显示。但是，他也有一个致命的缺点，脱离文档流的特性导致他的父级无法感受到他的高度，会因此造成父元素的高度崩塌。

下面请看实例看实例戳这里——————>点击打开链接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="images/favicon1.ico"/>
<title>北晨的博客—float浮动</title>
<style type="text/css">
*{margin:0px;padding:0px;}
h1{margin-top:30px;text-align: center;}
#father{background:yellow;}
.box1,.box2{width:100px;height:100px;}
.box1{background-color:red;float:left;}
.box2{background-color:blue;float:right;}
</style>
</head>
<body>
<h1>浮动造成的高度崩塌</h1>
<div id="father">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div>
</body>
</html>

在这个例子中，我们会发现，这个id为father的div元素，他的高度为0。这就是浮动带来的缺点，父级高度塌陷，无法像正常情况一样父级元素的高度会被子级撑起来。那么面对这个问题，我们该如何解决父类塌陷呢，接下来我们会谈谈如何清除浮动（元素依然可以向左向右的浮动，但是不会造成父级高度塌陷。）

清除浮动常用的几种方法：

1.给父级设置高度。（不是很好，因为内容一般不是固定的。）

2.在父级中添加一个没有任何作用的空标签，并且给它添加一个属性(clear:both;)

.clearfix{clear:both;}
<div class="clearfix"></div>

3.在父级上使用after伪元素。（推荐使用）

#father:after{content:"";clear:both;display:block;}

4.在父级中使用overflow属性
#father{background:yellow;overflow:auto;zoom:1;}

5.之前看过一个很好的清除浮动的方法，推荐给大家：

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}

作者：齐修_qixiuss
链接：http://www.jianshu.com/p/09bd5873bed4
來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

标签： 前端博客 css 文档

相关文章推荐

新的分享

章节导航