css的浮动和清除浮动
1、浮动元素的一大特点:它之前占标准文档流里的位置,会腾”出来给其他标准文档流中的元素使用!
一个父元素里包裹若干个元素,这些元素是一个集合,这个集合元素中如果所有元素都设置了浮动,且他的父元素足够大,那他们将会在并排显示
<!-- div.son.son1+div.son.son2+div.son.son3 快捷写法-->
<div class="son son1">盒子1</div>
<div class="son son2">盒子2</div>
<div class="son son3">盒子3</div>
css样式:
*{
margin: 0;
padding: 0;
}
.parent{
width: 800px;
height: 800px;
border:5px solid red;
margin: 0 auto;
}
.son{
width: 300px;
height: 200px;
color: blue;
font-size: 30px;
}
.son1{
background-color:lawngreen;
}
.son2{
background-color:lemonchiffon;
}
.son3{
background-color:lightgray;
}
代码演示:
2、当给一个元素浮动属性时,这个元素会脱离标准文档流 ,我们给box1、box2添加float:left
css:
*{
margin: 0;
padding: 0;
}
.parent{
width: 800px;
height: 800px;
border:5px solid red;
margin: 0 auto;
}
.son{
width: 300px;
height: 200px;
color: blue;
font-size: 30px;
}
.son1{
background-color:lawngreen;
float: left;
}
.son2{
background-color:lemonchiffon;
float: left;
}
.son3{
background-color:lightgray;
}
代码演示:
可以看到box1、box2并排显示,而box3“消失不见”,这个时候box3代替了之前标准文档流box1的位置,盒子里的文本是不会被盖住的 盒子颜色可以被覆盖 ,我们将box1,box2设置display:none让它们隐藏:
.son1{
background-color:lawngreen;
float: left;
display: none;
}
.son2{
background-color:lemonchiffon;
float: left;
display: none;
}
代码演示:
3、浮动的元素脱标:当给一个元素浮动属性时,这个元素会脱离标准文档流Markup
<span class="s1">盒子</div>
css样式:
*{
margin: 0;
padding: 0;
}
.s1{
float: left;
width: 200px;
height: 200px;
background-color: #0000FF;
color: #FFFACD;
}
代码演示:
4、浮动的元素有“字围”效果
代码:
css样式:
/* 字围效果 */
.w{
width: 1000px;
margin: 0 auto;
}
img{
float: left;
width: 100px;
}
.w p{
/* 文本首行缩进两个汉字 */
text-indent: 28px;
}
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果