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

一天搞定CSS： 清除浮动（float）--13

2017-05-10 17:59 423 查看
上一节已经说明了为什么要清除浮动了。这里我们就来解决浮动产生的各种问题。

为什么要清楚浮动？

地址：http://blog.csdn.net/baidu_37107022/article/details/71554283

1.清除浮动方法概览



2.clear方法



代码演示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 200px;
background: red;
}

/*1.left   元素的左边不能有浮动的元素*/
/*.div1{
float: left;
}
.div2{
clear: left;
}*/

/*2.right       元素的右边不能有浮动的元素*/
/*.div1{
float: right;
}
.div2{
clear: right;
}*/

/*3.both        元素的两都不能有浮动的元素*/
.div1{
float: left;
}
.div2{
float: right;
}
.div3{
clear: both;
}
</style>
</head>
<body>
<!--
clear           元素的某个方向上不能有浮动的元素
left        元素的左边不能有浮动的元素
right       元素的右边不能有浮动的元素
both        元素的两都不能有浮动的元素
-->
<div class="div1">kaivon1</div>
<div class="div2">kaivon2</div>
<div class="div3">kaivon3</div>
</body>
</html>


效果图

清除浮动前：div3钻到了div1下面



清除浮动后：



3.方法2–6的



代码演示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent{
border: 1px solid #f00;

/*2、给父级添加高度：没有从根本上解决浮动的问题*/
/*height: 100px;*/

/*3、inline-block*/
/*display: inline-block;
margin: 0 auto;*/

/*4、overflow:hidden;*/
/*overflow: hidden;*/
}
.box{
width: 100px;
height: 100px;
background: green;
float: left;
}
</style>
</head>
<body>
<!--
清除浮动的方法
1、clear
2、给父级添加高度
有的时候是不能给父级添加高度的，所以这个方法就用不了（父级没有高度的情况下）
3、inline-block
具有与上一个的清除浮动一样的总是，同时加了以后这个元素就没有办法居中了
4、overflow:hidden;
如果子级有定位的话，并且这个定位超出了父级的范围，那样的话就看不到了，所以不能加这个命令
5、空标签
空标签是没有内容，但是它的作用是用来清除浮动的，所以不符合行为、样式、结构相分离的标准
ie6下标签是有一个最小高度19px，解决后也会有2像素的偏差
6、br清除浮动
与上面的问题是一样
7、after伪类清除浮动（现在最主流的方法）
-->
<div class="parent">
<div class="box"></div>

<!--5、空标签-->
<!--<div style="clear: both;"></div>-->

<!--6、br清除浮动-->
<br clear="all" />
</div>

</body>
</html>


效果图

清除浮动前：



清除浮动后：



4.after伪类清除浮动（现在最主流的方法）



代码演示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent{
border: 1px solid #f00;
}
.box{
width: 100px;
height: 100px;
background: green;
float: left;
color: #fff;
}
/*
* 7、after伪类清除浮动（现在最主流的方法）
*
* .box:after{
content: '这是伪类生成的内容';
}*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<!--
清除浮动的方法
1、clear
2、给父级添加高度
有的时候是不能给父级添加高度的，所以这个方法就用不了（父级没有高度的情况下）
3、inline-block
具胡与上一个的清除浮动一样的总是，同时加了以后这个元素就没有办法居中了
4、overflow:hidden;
如果子级有定位的话，并且这个定位超出了父级的范围，那样的话就看不到了，所以不能加这个命令
5、空标签
空标签是没有内容，但是它的作用是用来清除浮动的，所以不符合行为、样式、结构相分离的标准
ie6下标签是有一个最小高度19px，解决后也会有2像素的偏差
6、br清除浮动
与上面的问题是一样
7、after伪类清除浮动（现在最主流的方法）
after       代表选择到的元素的内容的最后面
after伪类的内容默认是一个行内元素
content     设置的内容
-->
<div class="parent clearfix">
<div class="box"></div>
</div>

</body>
</html>


效果图同上（第3点）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航