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

  • 怎么样子盒子能撑起父盒子?浮动,BFC,边距重叠已关闭评论
  • 13 次浏览
  • A+
所属分类:Web前端
摘要

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


怎么样子盒子能撑起父盒子?

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

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

  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,边距重叠

边距重叠


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