13、前端开发：CSS知识总结——浮动及高度塌陷

一、浮动

块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，

  如果希望块元素在页面中水平排列，可以使块元素脱离文档流

使用float来使元素浮动，使一个元素向其父元素的左侧或右侧移动，从而脱离文档流

  可选值：

    none，默认值，元素默认在文档流中排列

    left，，向页面的左侧浮动

    right，向页面的右侧浮动

二、浮动的特点

1:浮动元素会脱离文档流，元素脱离文档流以后，不会再占用文档流的位置，它下边的元素会立即向上移动

2:元素浮动以后，元素会尽量向页面的左上或页面右上漂浮

3:浮动元素默认不会从父元素中移出

4:浮动的元素不会超过他上边的兄弟元素，最多最多一边齐

5:如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

 总结

  浮动目前来讲它的主要作用就是让页面中的块元素可以水平排列

     通过浮动可以制作一些水平方向的布局

三、高度塌陷：

    父元素的高度一般情况，不会设置固定高度，都是内容撑开的，一旦设置子元素

    浮动，子元素就会脱离文档流，子元素脱离文档流后，就不能再撑开父元素的高度了

    导致父元素的高度塌陷，随后导致页面布局混乱

 高度塌陷解决方案一：

    1、直接给父元素设置固定高度即可这种方式，不推荐使用

 高度塌陷解决方案二：

      页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC

        当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素

解决高度塌陷方案三：

          可以直接在高度塌陷的父元素的最后，添加一个空白的div，

          由于这个div并没有浮动，所以他是可以撑开父元素的高度的，

          然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，

          基本没有副作用

          使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构

解决高度塌陷方案四：

通过after伪类，选中box1的后边

  可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，

  这样做和添加一个div的原理一样，可以达到一个相同的效果，

  而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

        BFC 理解为一个封闭的大箱子，箱子内部的元素不会影响到外部。

      开启BFC后，元素将会具有如下的特性：

      1.父元素的垂直外边距不会和子元素重叠（解决父子外边距重叠的问题）

      2.开启BFC的元素不会被浮动元素所覆盖(用的不多)

      3.开启BFC的元素可以包含浮动的子元素（可解决高度塌陷）

     

      如何开启元素的BFC

      1.设置元素浮动（不推荐）

        - 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失

          而且使用这种方式也会导致下边的元素上移，不能解决问题

      2.设置元素为inline-block（不推荐）

        - 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式

      3.将元素的overflow设置为一个非visible的值

      4.设置元素绝对定位

         元素也会脱离文档流，虽然可以撑开父元素，但是会导致父元素的宽度丢失

          而且使用这种方式也会导致下边的元素上移，不能解决问题

              

      推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。、

四、清除浮动

我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能

      clear可以用来清除其他浮动元素对当前元素的影响

      可选值：

        none，默认值，不清除浮动

        left，清除左侧浮动元素对当前元素的影响

        right，清除右侧浮动元素对当前元素的影响

        both，清除两侧浮动元素对当前元素的影响

            清除对他影响最大的那个元素的浮动