css清除浮動的方法
- 一个新手原創
- 2017-10-24 09:06:531622瀏覽
css中的float：
float:left 左浮动
float:right 右浮动
float:none 不浮动
float:inherit 继承浮动(继承父元素浮动属性，如果父元素无浮动属性，inherit失效)
浮动产生哪些问题：1.父元素塌陷，没有高度。2.网页中的临近元素出现异位
清除浮动的几种方法：
1.手动给父元素添加高度 缺点：如果子元素过多且数量不确定，设置较为复杂。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
/*给父级元素添加高度 */
*{
padding:0;
margin:0;
}
.news {
background-color: red;
border: solid 1px black;
height:200px; /*设置高度，如果去掉高度元素塌陷*/
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div>
<img src="1.jpg" />
<p>some text</p>
</div>
</body>
</html>2.用clear属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
/* 清除浮动 clear*/
*{
margin:0;
padding:0;
}
.news {
background-color: red;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.content{
clear:both;/*两边都清除浮动*/
}
</style>
</head>
<body>
<div>
<img src="1.jpg" />
<p>some text</p>
<div></div>
</div>
</body>
</html>3.给父元素添加overflow属性并结合zoom:1使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
/* 给父级元素添加overflow:hidden; */
*{
margin:0;
padding: 0;
}
.news {
background-color: red;
border: solid 1px black;
overflow: hidden; /*溢出隐藏*/
zoom:1;/*兼容IE浏览器*/
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div>
<img src="1.jpg" />
<p>some text</p>
</div>
</body>
</html>4.给父级元素添加浮动 缺点：相邻元素位置异常
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
/* 给父级元素添加浮动 */
*{
margin:0;
padding:0;
}
.news {
background-color: red;
border: solid 1px black;
float: left; /* 给父级元素添加浮动 */
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div>
<img src="1.jpg" />
<p>some text</p>
</div>
</body>
</html>5.使用:after伪元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
/* 使用伪元素：after添加浮动 */
*{
margin:0;
padding:0;
}
.news {
background-color: red;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clearfix:after{
content: "\0020";/*在父容器的结尾处放一个空白字符*/
display: block;
height: 0; /*让这个空白字符不显示出来*/
clear: both;
}
/* 兼容IE6和IE7,触发haslayout */
.clearfix{
zoom:1;
}
</style>
</head>
<body>
<div class="news clearfix">
<img src="1.jpg" />
<p>some text</p>
</div>
</body>
</html>以上是css清除浮動的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn