CSS3--浮动

一、浮动布局

1、浮动起初为文字环绕效果设计，会把文字挤出去。

2、浮动元素具有行内块元素特性，原本块级盒子未设置宽度默认和父级一样宽，但添加浮动后宽度由内容决定。

3、浮动盒子间没有缝隙，如果一行装不下，多出的会换行对齐。

4、浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box1 {
        /*width: 200px;*/
        /*height: 200px;*/
        background-color: pink;
    }

    .box2 {
        float: left;
        width: 150px;
        height: 100px;
        background-color: rgb(0, 153, 255);
    }

    .box3 {
        width: 100px;
        height: 110px;
        background-color: blue;
        border: 10px solid #1b6d85;
    }
</style>


<div class="box">
    <div class="box1">
        <div class="box2">浮动的盒子</div>
    </div>

    <div class="box3">标准流盒子2</div>
</div>

二、浮动引起的问题

浮动元素的父元素坍缩：父元素很多情况下不方便给高度，但子盒子浮动不占位置，导致父盒子高度为0，就会影响下面的标准流盒子，即影响与父元素同级的元素。

解决方案：

1. 将父元素的高度写死，但无法自动适应子元素的高度
2. 清除浮动

三、清除浮动

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题，清除浮动后父级会根据子元素自动检测高度。

1、额外标签法

在最后一个浮动子元素后添加额外块级标签和清除浮动样式 

.clear {
  clear: both;
}
<div class="clear"></div>

2、父元素overflow

给父级添加overflow属性，属性值设为hidden，scroll或auto

3、after伪元素

给父级添加如下样式

/*
使用伪元素来清除浮动(固定写法)
*/
.clearfix:after {
content:"";
height: 0;
line-height: 0;
display: block;
/*表示可见性设置为隐藏*/
visibility:hidden;
clear:both;
}

.clearfix {
/*用来兼容ie浏览器，因为ie版本的不同，有些浏览器可能并不兼容.clearfix:after{} 中的属性。为了使ie浏览器也可以正常显示需要加此属性*/
zoom: 1;
}

例一图片 正常显示如下：