HTML+CSS3浮动问题clear和overflow

clearoverflow在清除浮动的使用:

1.clear 

首先 清除浮动的原理 ,其实 是元素留出足够多的 垂直外边距 给浮动的元素。

代码如下:
<div >
<div style="float:left"></div>
</div>

这个效果 是 外层div不会包含内层div。因为浮动的元素 脱离了原始文档流。
以上面这个为例:一般而言 ,有三种方式清除浮动。

第一:让外层元素也浮动,例如:

代码如下:
<div style="float:left" >
<div style="float:left"></div>
</div>

然后 再此元素之外 的元素上添加clear:both效果。
第二:给外层div的末尾添加一个元素,并利用此元素清楚浮动。
具体用法:

代码如下:
<div style="clearfix" >
<div style="float:left"></div>
</div>
.clearfix:atfer{
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}
.clearfix{display:inline-block}
.clearfix{display:block}

其中后面的两个 是为了兼容其他浏览器设置的。因为:after不是所有浏览器都支持的。
第三:利用 overflow属性

代码如下:
<div style="overflow:hidden" >
<div style="float:left"></div>
</div>

第四:两个相互不包含的元素,清除后面一个元素的浮动。

<div class="box">...</div>
<section class="after-box">...</section>

清除浮动前

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

清除浮动后

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

2.overflow

div标签里面有一张图片,但是比div还要高,这样图片就会把超出的地方浮动到div外面,为了不让图片的超出部分浮动到div外面,使用overflow来清除浮动,原始如下图:

imgout20170216135022

<style type="text/css">
    body{
         margin: 0;padding: 0;
    }
    div{
         border:5px solid red;
    }
    img {
         float: right;
    }
    .clearfix {
         overflow: auto;
         /*zoom: 1;//支持IE6兼容*/
    }
</style>
<div class="clearfix">
不......这个图片比包含它的元素还高, 而且它是浮动的,于是它就溢出到了容器外面!
<img src="http://img.aipaike.com//group1/M00/0C/79/Cvv7ZVdyJneANc73AAO5i6uQbvA283_300x300.jpg">
</div>

正常浮动后如下图:

imgin20170216135022

2 Comments

Leave a comment