html – 为什么带有clearfix的inline-flex元素有一个奇怪的空格？

概述当对它应用clearfix时,我有一个inline-flex元素的奇怪行为.当我为具有inline-flex显示属性的元素设置clearfix时,会出现奇怪的空格： 但是当使用内联块时,行为是不同的： 我不明白为什么inline-flex与inline-block有不同的行为..为什么它有那么奇怪的空间. .a,.b { border: 1px solid red;}.a { tex 当对它应用clearfix时,我有一个inline-flex元素的奇怪行为.当我为具有inline-flex显示属性的元素设置clearfix时,会出现奇怪的空格：

但是当使用内联块时,行为是不同的：

我不明白为什么inline-flex与inline-block有不同的行为..为什么它有那么奇怪的空间.

.a,.b {  border: 1px solID red;}.a {  text-align: center;}.b {  display: inline-flex;  height: 20px;  wIDth: 20px;}.cf:before,.cf:after {  content: " ";  display: table;}.cf:after {  clear: both;}

<div >  <div ></div></div>

JSFiddle Demo

解决方法 display：inline-flex

使用display：inline-flex时,可以建立Flex容器.

Flex容器的初始设置是flex-direction：row.

这意味着容器的所有in-flow子元素(包括in-flow伪元素)将排成一行.根据flex formatting context的规则,覆盖/忽略这些子项的显示值(在本例中为table).

您的Flex容器在一行中有两个flex项(伪元素)：

.a,.cf:after {  content: "x";  display: table;}.cf:after {  clear: both;}

<div >  <div ></div></div>

display：内联块

使用display：inline-block时,建立block formatting context.

子元素的显示属性受到尊重.

带有display：table的伪元素是块元素,默认情况下占用整个可用宽度.因此,伪正在创建两行：

.a,.b {  border: 1px solID red;}.a {  text-align: center;}.b {  display: inline-block;  height: 20px;  wIDth: 20px;}.cf:before,.cf:after {  content: "x";  display: table;}.cf:after {  clear: both;}

<div >  <div ></div></div>

vertical-align：baseline

因为您的代码的两个版本都使用内联级别的显示值,所以这会调用vertical-align属性,其初始值为baseline.

设置为显示时,您在div.b下方看到的空白区域：inline-flex是由于基线对齐.

设置为显示时,您在div.b下方看到的空白区域：内联块是由于基线对齐以及两个块元素子项的效果.

这是一个更详细的解释:: https://stackoverflow.com/a/36975280/3597276

清晰的财产

.cf:after {    clear: both;}

您的clearfix方法不是任何空格的来源.实际上,它对您的布局没有任何影响,可以安全地删除.

只有在处理浮点数时才使用clear属性.

从规格：

07003

This property indicates which sIDes of an element’s Box(es) may not be
adjacent to an earlIEr floating Box.

不仅布局中没有浮动元素,但如果有,浮动和清除属性仍会在flex格式化上下文中被忽略.

07004

float and clear do not create floating or clearance of flex item,and do not take it out-of-flow.

总结

以上是内存溢出为你收集整理的html – 为什么带有clearfix的inline-flex元素有一个奇怪的空格？全部内容，希望文章能够帮你解决html – 为什么带有clearfix的inline-flex元素有一个奇怪的空格？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。