HTML尚硅谷学习笔记-高度塌陷和BFC

高度塌陷

浮动布局中，父元素的高度是被默认撑开的。

当子元素浮动之后，会脱离文档流，子元素从文档流中脱离，无法撑起父元素，导致父元素高度丢失。

-BFC（block formatting content ）块级格式化环境

-BFC是css中隐含属性，可以为一个元素开启BFC，开启后则该元素会变成一个独立的布局区域

-开启后的特点：

  1.开启BFC的元素不会被浮动元素所覆盖

  2.开启BFC的元素子元素和父元素的外边距不会重叠

  3. 开启BFC的元素可以包含浮动的子元素

-用特殊方式开启开启BFC（间接开启，有副作用）

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

    直接为父元素设置float：left

  2.将元素设为行内块元素（不推荐）

    display：inline-block

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

    overflow：hidden（或auto）（默认）

    

1-A元素设置浮动，盖住B元素，可以给B元素设置BFC，则AB并排不被盖住

2-A元素是B元素的父元素，设置B元素的margin外边距，外边距重叠，此时更改的是父元素的外边距。

给B元素设置overflow：hidden，则开启B元素的BFC属性，这时的margin是在A父元素内的B元素的外边距

设置BFC是把其设置为一个独立的容器，不受其他元素影响

3-利用overflow：hidden开启父元素的BFC使其可以包含住子元素

快速创建div

.box1+.box2+.box3

元素中有文字，元素浮动文字环绕在浮动元素周围不浮动

可以通过clear清楚浮动元素对当前元素产生的影响

设置清除浮动后，浏览器会 自动为元素设置一个外边距（margin），使其位置不受其他元素影响

clear：left（清除向左浮动元素影响）

right（清除向左浮动元素影响）

both（清除影响最大的浮动元素的影响）

box1设置float：left

给box3设置clear：left可以清除box1的浮动产生影响（你飘了，但是管我屁事）

-伪元素：：after：高度塌陷最终解决办法

默认为行内元素，原理是通过添加元素clear：left清除浮动元素的影响，但改变了结构.

但是用css样式的方式，也可以用html的方式添加一个div设置clear：left

写在高度塌陷的父元素

.box1：：after（意思是在 父元素的最后）{

content：‘ ’；（写的内容，也可以不写）

clear：left；（清除影响）

display：block；（改为块元素）}

before：

在A元素是B元素的父元素，在B元素中添加外边距，此时外边距重叠，A元素获得外边距，

此时在A元素最上方增加一个before隔开B元素，即可使B元素成功在A元素中增加外边距

before解决高度重叠

.A：：before{

content:' ';

display:table;

}

(此时虽然成功但会使B元素溢出)

-clearfix可同时解决解决高度塌陷、外边距重叠。

.clearfix：：before，

.clearfix：：after{

content:' ';

display:table;（解决高度塌陷、外边距重叠）

clear：both；（）

}

正在上传…重新上传取消

需要解决高度塌陷和外边距重叠就直接写入div中

正在上传…重新上传取消

不理解可以背下来！