五、浮动、高度塌陷、clear

1.浮动

• 浮动是一种比较传统的布局方式，通过浮动使元素向页面的左侧或右侧移动。

• 使用float属性来设置元素的浮动

  • 可选值：

    • none 默认值 元素不浮动
    • left 元素向左浮动
    • right 元素向右浮动

  • 浮动的特点：
    （1）元素浮动以后会完全脱离文档流，其下的元素会自动上移
    （2）设置浮动后元素会向页面的左侧或右侧移动
    （3）浮动元素不会盖住没有浮动的兄弟元素，也不会浮出父元素的边框
    （4）浮动元素不会超过他上面的没有浮动的兄弟元素，最多一边齐
    （5）浮动元素不会覆盖文字

  • 脱离文档流：
    （1）行内元素变成块元素
    （2）块元素宽度和高度都被内容撑开，并且不会独占页面的一行

  • 清除浮动clear

    • 可选值：
      • none 不清除浮动
      • left 清除左侧浮动
      • right 清除右侧浮动
      • both 清除最大那侧的浮动

  • 高度塌陷的问题：

    • 父元素的高度默认被子元素撑开，如果子元素浮动将会导致父元素的高度塌陷。
    • 解决方式：
      • 开启父元素BFC，overflow:hidden
      • 使用clearfix
        .clearfix::before,
        .clearfix::after{
        content:’’;
        display:table;
        clear:bith;
        }

2.BFC

BFC是元素的一个隐藏属性，开启BFC的元素会具有一个独立的布局区域，这个区域会独立的布局，不会受到外部的元素的影响。

• 元素开启BFC后的特点：
  （1）开启BFC的元素，不会被浮动元素所覆盖
  （2）开启BFC的元素，子元素的外边距不会传递给父元素
  （3）开启BFC的元素，可以包含浮动的子元素

• 开启BFC的方式：
  （1）设置浮动
  （2）设置display为inline-block
  （3）设置overflow为一个非默认值的值