css清除浮动
2021-05-19 13:28
标签：log out logs order 空白 元素 display oat hid css中的float： float:left 左浮动 float:right 右浮动 float:none 不浮动 float:inherit 继承浮动(继承父元素浮动属性，如果父元素无浮动属性，inherit失效) 浮动产生哪些问题：1.父元素塌陷，没有高度。2.网页中的临近元素出现异位 清除浮动的几种方法： 1.手动给父元素添加高度 缺点：如果子元素过多且数量不确定，设置较为复杂。 2.用clear属性 3.给父元素添加overflow属性并结合zoom:1使用 4.给父级元素添加浮动 缺点：相邻元素位置异常 5.使用:after伪元素 css清除浮动 标签：log out logs order 空白 元素 display oat hid 原文地址：http://www.cnblogs.com/yyfyl/p/7717158.htmlDOCTYPE html>
html lang="en">
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 class="news">
img src="1.jpg" />
p>some textp>
div>
body>
html>
DOCTYPE html>
html lang="en">
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 class="news">
img src="1.jpg" />
p>some textp>
div class="content">div>
div>
body>
html>
DOCTYPE html>
html lang="en">
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 class="news">
img src="1.jpg" />
p>some textp>
div>
body>
html>
DOCTYPE html>
html lang="en">
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 class="news">
img src="1.jpg" />
p>some textp>
div>
body>
html>
DOCTYPE html>
html lang="en">
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 textp>
div>
body>
html>
下一篇：关于清除浮动、css定位的学习