怎么样子盒子能撑起父盒子？浮动,BFC,边距重叠

时间：2022-11-02 15:05:57

从行内元素跟块元素来看:

一般情况下，行内元素只能包含数据和其他行内元素。 而块级元素可以包含行内元素和其他块级元素.

  1. 块级元素内部可以嵌套块级元素或行内元素。
  2. 建议行内元素里面只嵌套行内元素。

行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素和平共处于一行；

而块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以设置 width 和 height 属性，浏览器通常会在块级元素前后另起一个新行。

行内元素尺寸由内含的内容决定，盒模型中 padding, border 与块级元素并无差异，都是标准的盒模型，但是 margin 却只有水平方向的值，垂直方向并没有起作用。

块级元素当没有明确指定 width 和 height 值时，块级元素尺寸由内容确定，当指定了 width 和 height 的值时，内容超出块级元素的尺寸就会溢出，这时块级元素要呈现什么行为要看其 overflow 的值

当使用div+css布局时，会出现很多的div嵌套——父div内嵌套一个或多个的子div，默认情况下，父div的高度是auto——它可以被子div任意的撑大。

父div也可以有固定的高度(或宽度)，比如height:500px，那么如果子div的高度超过了这个值，在默认情况下，子div会超出父div的束缚，这就是溢出

以下是子盒子撑不起父盒子的情况:

1.如果父元素已经规定了高度，不会高度塌陷，但可能会溢出（如果子元素总高度超过父元素的话）

解决方法:overflow属性,使多余部分不显示
2.如果父元素没有规定高度：常规流盒子在自动计算高度时，无视浮动盒子——高度坍塌
如果所有子元素都浮动，父元素没有高度，这时候给父元素设置边框的话，就会发现边框保不住子元素;
如果存在没有浮动的子元素，父元素高度取决于没有浮动的子元素，所以如果浮动子元素高度更大的话，还是会塌陷

浮动:

定位体系之一,常用于布局，可以很轻松的达到靠左靠右的效果,就是布局后要处理浮动带来的后续影响(父级高度塌陷)

常用语法:float:left左浮动/right右浮动/none不浮动;

任何元素都可以使用浮动，无论是块级元素div、ul等等，还是行内元素都可以浮动

任何被声明float的元素都会自动被设置成块元素，有了块级元素的各种特点，可以设置宽高，可以设置内外边距。

浮动后盒子位置

（1）左浮动的盒子向上向左排列；

（2）右浮动的盒子向上向右排列；

（3）(第二个)浮动盒子的顶边不得高于上一个盒子的顶边(上边在一条直线上)；

（4）若剩余空间无法放下浮动的盒子，则该盒子向下移动，直至具备足够的空间可以容纳盒子，然后再向左或向右移动。

常规盒子和浮动盒子同时存在

浮动盒子在摆放时会避开常规盒子

常规盒子会无视浮动盒子

常规盒子在计算高度时,无视浮动盒子(其余常规盒子高度低于浮动盒子,容易高度塌陷)

怎么样子盒子能撑起父盒子？浮动,BFC,边距重叠
块级盒子常规1在前,浮动避让到第二行,常规2在浮动后面,但是无视浮动盒子,呈现上图,大盒子是上面常规盒子的高度之和

怎么样子盒子能撑起父盒子？浮动,BFC,边距重叠
因为没有常规子盒子,常规盒子计算高度忽略浮动元素,高度塌陷

浮动带来的影响

1、背景无法显示
由于浮动的设置，如果对父级设置了CSS 背景 background、CSS背景颜色或CSS背景图片，则父级元素将不能被撑开，所以导致CSS背景不能显示。

2、边框无法撑开
如果父级设置了CSS边框 border 属性，由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin、padding 设置值无法正确显示
由于浮动的设置，导致父级子级之间设置了 margin 或 padding 属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

解决方法:清除浮动:

1.使用:after伪元素方法,

可以直接在元素上添加:after{添加下列内容},也可以直接使用.clearfix这个class属性

.clearfix:after{

content: ""; /内容设置为空！！！/
display: block; /显示为块级元素！！！/
height: 0;
visibility: hidden;
clear: both; /清除浮动！！！/

}

通过3行代码 content: ""; display: block; clear: both; (必须写的内容)便可实现。

如果在IE6和IE7浏览器上使用，则需给clearfix添加一条属性zoom:1;以触发 haslayout 。

2.给父级设置高度

3.clear属性,设置某侧不许浮动

clear:both/left/right

3.隔墙法:

所谓“隔墙法”是指在元素里面或外面添加一堵“墙”，即块元素，通过对其配置一定的CSS属性，以达到清除浮动的目的。

外墙法 ：在元素与元素之间新增一个块元素，并设置clear属性。

<div class="box1"> ... </div>
<div style="clear:both"> </div>
<div class="box2"> ... </div>

内墙法 ：在父元素里的所有子元素之后新增一个块元素（即父元素的last-child），并设置clear属性

<div class="box1"> 
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
    <div class="clear"></div>
</div>

新增的块margin-buttom不能使用,但是下个元素的buttom-top可以使用

这个方法所能体现的优点：1. 避免了多余标签的使用； 2. 可以兼容大部分浏览器。

4.BFC方法,overflow方法:

overflow:hidden;可以解决子元素溢出问题,还能解决高度塌陷问题.这里父盒子的高度小于子盒子中浮动盒子的高度,这是塌陷问题,不是溢出问题,多出部分不会被裁

怎么样子盒子能撑起父盒子？浮动,BFC,边距重叠
如图,父级盒子是两个盒子的高度撑起来的,没有被裁掉的情况

overflow：hidden的意思是超出部分去掉，如果父元素height为auto，内部元素浮动，势必会将内部元素全部隐藏，故计算出内部浮动高度顺便清除浮动。

看到的一个理解：overflow: hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。深入理解overflow

实际原理:

BFC （Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body)一个块级上下文，但是如果一个块级元素 设置了float:left，overflow:hidden或position:absolute样式，就会为这个块级元素生成一个独立的块圾上下文，就像在window全局作用域内，声明了一个function就会生成 一个独立的作用域一样，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版完全独立隔绝。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。

独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。overflow清除原理

如何触发BFC

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 下列方式会创建块格式化上下文：

  • 根元素()
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
  • overflow值不为visible的块元素 -弹性元素（display为 flex 或 inline-flex元素的直接子元素）
  • 网格元素（display为 grid 或 inline-grid 元素的直接子元素） 等等。

BFC是什么?怎么触发

BFC渲染规则

  • BFC垂直方向边距重叠
  • BFC的区域不会与浮动元素的box重叠
  • BFC是一个独立的容器，外面的元素不会影响里面的元素
  • 计算BFC高度的时候浮动元素也会参与计算

解决问题:解决高度塌陷,外边距重叠

边距重叠:是指两个或多个盒子(相邻或嵌套)的相邻边界(其间没有任何非空内容,补白,边框)重合在一起而形成一个单一边界

解决这个问题的方法就是:破坏上面"相邻边界(其间没有任何非空内容,补白,边框)重合在一起"这个条件,
属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC解决重叠问题.

1.父子元素边界重叠:子元素添加 margin-top ，父元素下移(margin-top对父盒子作用了),子盒子跟父盒子间的垂直距离不变.

怎么样子盒子能撑起父盒子？浮动,BFC,边距重叠

.father{
 width: 500px;
 height: 500px;
 background-color: red;
 /* border: #000000 3px solid;	1. 给父元素添加边框 */
 /* padding-top: 100px; 	2.给父元素添加内填充,用 padding 
 	替换margin-top */
 /* overflow: hidden; 	3.设置 overflow:hidden; */
 /* position: absolute; 	4.父元素设置绝对定位 */
 /* float: left; 	5.父元素设置浮动 */
 /* display: inline-block; 6.父元素修改元素类型 */
 	}


/* .father::before{
 content: "a";
 display: block; */
 /* overflow: hidden;  	7.使用伪对象选择器，给父元素前添加
 	内容，虽然为空，但是添加属性 overflow:hidden; 可以消除影响  */
 	}
————————————————

对子元素设置

son{
	width: 300px;
	height: 300px;
	background-color: green;
	margin-top: 100px;
	/* position: absolute; 	8.子元素设置绝对定位 */
 /* float: left; 	9.子元素设置浮动 */
 /* border: #000000 3px solid;	给子元素添加边框无效 */
 	}

浮动元素和绝对定位元素不参与边距合并。

父元素添加 overflow：hidden/auto ， display: inline-block；这两种方法是将父元素转化为BFC（页面布局中一块独立区域，其边距等属性不受其他元素影响。）

给父元素添加 border 和 padding 可以消除，是从 css 触发规范上解决问题

2.兄弟元素边界重叠(绝对值大的边界保留)上下盒子添加外边距重叠问题
解决方法:定位,浮动,display修改类型

怎么样子盒子能撑起父盒子？浮动,BFC,边距重叠

边距重叠

补充:文字出现的链接有针对某一部分的解释,借鉴学习并整理

标签：

相关文章