CSS学习之清除浮动

来源：互联网发布：ubuntu 升级软件包编辑：程序博客网时间：2024/05/29 11:41

浮动产生的负作用：

当子盒子在父盒子内部有浮动效果时，父盒子由于没有合适的高度和宽度，父盒子不能完全包含子盒子，布局就会出现差错。

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">.div{background-color: red;border: 1px seagreen solid;}.div1{width: 50px;height: 50px;background: #eee;float:left ;margin-left: 10px;}.div2{width: 50px;height: 50px;background: #bbb;margin-left: 10px;float: left;}.div3{width: 50px;height: 50px;background: #ddd;float: left;margin-left: 10px;}</style></head><body><div class="div"><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div></div></body></html>

父元素不能被子元素撑开

清楚浮动方式：

1、对父元素设置适当的高度

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">.div{height: 60px;/*给父元素设置一个合适高度*/background-color: red;border: 1px seagreen solid;}.div1{width: 50px;height: 50px;background: #eee;float:left ;margin-left: 10px;}.div2{width: 50px;height: 50px;background: #bbb;margin-left: 10px;float: left;}.div3{width: 50px;height: 50px;background: #ddd;float: left;margin-left: 10px;}</style></head><body><div class="div"><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div></div></body></html>

2、利用overflow：hidden

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">.div{overflow: hidden;/*多余部分隐藏   贴近内容*/zoom: 1;/*兼容IE*//*zoom比例缩放*/background-color: red;border: 1px seagreen solid;}.div1{width: 50px;height: 50px;background: #eee;float:left ;margin-left: 10px;}.div2{width: 50px;height: 50px;background: #bbb;margin-left: 10px;float: left;}.div3{width: 50px;height: 50px;background: #ddd;float: left;margin-left: 10px;}</style></head><body><div class="div"><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div></div></body></html>

3、clear：both

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">.div{background-color: red;border: 1px seagreen solid;}/*.clearfloat:after{clear: both;content: '';display: block;}*/.div1{width: 50px;height: 50px;background: #eee;float:left ;margin-left: 10px;}.div2{width: 50px;height: 50px;background: #bbb;margin-left: 10px;float: left;}.div3{width: 50px;height: 50px;background: #ddd;float: left;margin-left: 10px;}.clear{clear: both;}</style></head><body><div class="div clearfloat"><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div><div class="clear"></div></div></body></html>

4、：after

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">.div{background-color: red;border: 1px seagreen solid;}.clearfloat:after{clear: both;/*清除浮动*/content: '';/*不会有内容显示在页面中*/display: block;/*显示*/

}.div1{width: 50px;height: 50px;background: #eee;float:left ;margin-left: 10px;}.div2{width: 50px;height: 50px;background: #bbb;margin-left: 10px;float: left;}.div3{width: 50px;height: 50px;background: #ddd;float: left;margin-left: 10px;}</style></head><body><div class="div clearfloat"><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div></div></body></html>

5、给父元素添加浮动

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">.div{background-color: red;border: 1px seagreen solid;float: left;}.div1{width: 50px;height: 50px;background: #eee;float:left ;margin-left: 10px;}.div2{width: 50px;height: 50px;background: #bbb;margin-left: 10px;float: left;}.div3{width: 50px;height: 50px;background: #ddd;float: left;margin-left: 10px;}.clear{clear: both;}</style></head><body><div class="div clearfloat"><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div></div></body></html>

阅读全文

0 0