前端——CSS overflow （浮动）

浮动

即，将某个图片进行浮动的状态，让文字在周围进行环绕。float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，是文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。

特点：

• 可以实现元素并排
• 浮动元素会生成一个块级框，而不论它本身是何种元素
• 脱离标准文档流，不在页面上占位置
• 文字出现环绕现象
• 收缩效果，即在有内容的时候将会进行收缩
• 贴边现象，给盒子的浮动，就会找盒子的边，如果找不到浮动盒子的边，就会贴父元素的边。
• 要浮动一起浮动，有浮动就要清除浮动

因为float以后，会撑不起父盒子的高度，所以需要对这些弊端进行解决。

清除浮动的方式：

固定高度

• 不灵活
• 后期也不易维护
• 适用于不变的导航栏或菜单栏

伪元素清除法

• 在clearfix后添加一个空元素
• 将其更改为块级标签
• 将其设置成clear:both

<style>
    .clearfix::after{
        content: '';
        display: block;
        clear:both;
    }
</style>

使用overflow

• overflow:hidden 框架内超出部分隐藏
• overflow:scroll   框架内使用滚轮
• overflow:visible 默认可见
• overflow:auto  自动
• overflow:inherit   自动

使用overflow来清除浮动，将父盒子设置为：hidden后除overflow：visible以外的其他形式浮动，都会形成一个BFC区域，BFC有它自己的一套规则体系，它会让浮动元素计算高度，来将盒子撑起来。

.head a {
    color: #b0b0b0;
    display: inline-block;
    text-decoration: none;
}
.topbar{
    float:left;
    line-height: 40px;
}