CSS浮动

CSS浮动

要想学习CSS浮动,首先要了解html中重要的一个概念----标准流。块级元素会独占一行，行内元素会按顺序依次排列，安装这种标准模式的布局叫标准流布局。

浮动（float）

什么是浮动？

• 浮动是指设置的浮动属性的元素会脱离普通流的控制，移动到其父元素的位置。

• 会失去块级元素独占一行的特性

  在CSS中，通过float属性来定义浮动，其基本定义如下：
  {float:left|right}
  当元素浮动之后，该元素在文档流中原来的位置会空出来，会出现和别的元素叠加的情况

<style>
div#father{
    padding: 20px;
    height: 400px;
    width: 400px;
    border: 3px solid rebeccapurple;
}
#first{
    height: 100px;
    width: 120px;
    float: left;
    border: 3px solid gold;
}
#second{
    height: 120px;
    width: 100px;
    float: left;
    float: top;
    border: 3px solid violet;
}
#third{
    height: 140px;
    width: 140px;
    border: 3px solid brown;
}
</style>

显示效果：

可以看到，我们给父元素设置了padding，脱离标准流的元素并不会无视padding与父元素对齐。
如果浮动元素随后的元素也是浮动的，且朝向一致，那就会并排排列。

---

清除浮动

为什么要清除浮动？
由于浮动不占用文档流空间，会导致一些问题，所以我们要清除浮动。
用法：{clear:both}

方法一：
在浮动元素后面添加一个div，然后给div加上clear:both；

方法二：
用:after方法在浮动元素最后设置内容并清除浮动

<style>
div#father{
    border: 3px solid rebeccapurple;
}
#first{
    height: 100px;
    width: 120px;
    float: left;
    border: 3px solid gold;

}
#second{
    height: 120px;
    width: 100px;
    float: left;
    border: 3px solid violet;
}
/* 第二种方法 */
#father:after{
    content:".";
    height: 0;
    display: block;
    clear: both;
    visibility: hidden;
}
/*第一种方法
.clear{
    clear: both;
} */
</style>

清除浮动之前的效果：由于子div都是浮动的，不占用空间，父div没有撑开高度。

清除浮动之后：

父div有了高度，不会影响之后的浮动div（不然会接着这个子div继续排列，忽视父div的约束）

---

overflow溢出

当父元素有固定高度，但浮动子div高度大于父元素，由于浮动div不占空间，所以不会撑开父div，所以就会导致视觉效果是溢出的，这时候在父元素上加上overflow:hidden，就可以把溢出的内容隐藏。

实现效果：