css浮动清除

解决办法:(指明该元素周围不可出现浮动元素)

1、在最外围的div设置能够放下两个div的高度(这个不说了)

2、一般我们采用的是clear:both的做法,但是这里我们会多加上div的标签,代码变多了。
3、对父级的div使用overflow:hidden
<pre>
<div class="div1">
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4"></div>
</div>
</pre>
style样式:
<code>
.div1{
border: 1px solid red;
clear: both;
}
.div2{
width: 100px;
height: 30px;
border: 1px solid blue;
float: left;
}
.div3{
width: 100px;
height: 30px;
border: 1px solid blue;
float: left;
}
.div4{
clear: both;
}
</code>

实现的效果是:

image.png

下面的是直接在div1使用了overflow:hidden 后的效果图:

image.png

和上面达到了一样的效果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 1. 什么是浮动 当元素的 float 属性不为 none 时就产生了浮动。 2. 浮动影响 浮动元素的外边距不会...
    overflow_hidden阅读 1,462评论 0 0
  • float : left | right | none 设计之初的作用是做文字环绕 p标签段落双标签块级 i...
    雅玲哑铃阅读 3,408评论 0 1
  • 文章版权归饥人谷_Lyndon以及饥人谷所有。 1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分...
    HungerLyndon阅读 6,965评论 4 10
  • 给父级元素设置高度 在底部添加一个空元素,清除浮动 父级div定义 overflow:hidden或者auto 为...
    抓住时间的尾巴吧阅读 2,224评论 0 0