让段落的左侧或右侧不允许浮动的元素出现

在回顾一下上节的浮动效果,同时针对不同元素左右浮动

<div style="border:1px solid #d1d1d1;padding:10px;">
    <div style="float: left;">
        <img src="http://usr.im/200x60?text=1&bg=000000"/>
    </div>
    <div style="float: right;">
        <img src="http://usr.im/200x60?text=2&bg=ff0000"/>
    </div>
</div>




<div style="border:1px solid #d1d1d1;padding:10px;height:80px;">
    <div style="float: left;">
        <img src="http://usr.im/200x60?text=1&bg=000000"/>
    </div>
    <div style="float: right;">
        <img src="http://usr.im/200x60?text=2&bg=ff0000"/>
    </div>
</div>



从效果上可以看到,浮动后的两张图片,飘出了父级元素,为了让它不飘出去, 给父级元素设置了一个固定的高度


使用 clear 属性去清除元素两边的浮动,达到我们预期的效果

<div style="border:1px solid #d1d1d1;padding:10px;">
    <div style="float: left;">
        <img src="http://usr.im/200x60?text=1&bg=000000"/>
    </div>
    <div style="float: right;">
        <img src="http://usr.im/200x60?text=2&bg=ff0000"/>
    </div>
    <div style="clear:both;"></div>
</div>

思考下

使用 <div style="clear:both;"></div> 来清除浮动,在网页开发中,
使用浮动的情况很多,我们不可能在每一处浮动的结尾处都添加这么
一行  <div style="clear:both;"></div> 代码,这样做会给 dom 树
带来很多冗余的元素,也不利于 javascript 动态的追加元素。

clearfix

天空一声巨响 clearfix 闪亮登场!

.clearfix{
    *zoom: 1; /* IE 触发 haslayout , 放大 1 倍,与原始大小不变*/
    *height: 1px; /* 同 zoom:1; 效果一样,触发 haslayout  */
}
/* 伪类就不过多介绍了 */
.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}


height: 1px; 这里你可能会疑惑为什么要设置 1px ,
网上有很多地方写的是 height : 1%;
我个人是这么理解的,给元素设置一定高度,如果元素实际内容比你设置的高度高,
但是你没有设置 overflow:hidden; 属性,那么元素的高度会被子元素内容撑开
有多少内容就会有多高。设置 height: 1px; 只是为了 触发  haslayout

使用 clearfix

<div class="clearfix" style="border:1px solid #d1d1d1;padding:10px;">
    <div style="float: left;">
        <img src="http://usr.im/200x60?text=1&bg=000000"/>
    </div>
    <div style="float: right;">
        <img src="http://usr.im/200x60?text=2&bg=ff0000"/>
    </div>
</div>