极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.box{height: 200px;background-color: red;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
当我给box设置了浮动和定位时，它设置了这2个属性后会不见，是因为这个盒子脱离了正常的文档流，所以它不能继承body的宽度吗？所以盒子撑不开，是这样理解吗？当我设置inline-block和inline时，这个盒子也会消失不见，这是为什么？
这个问题估计各个浏览器也呈现的不一样。具体的建议楼主看下英文w3c关于文档流的解释。你研究的问题确实比较深。。。
一般来说，浮动的元素不给高度和宽度，inline或者inline-block的元素。只要里面没有内容，就不会显示出来。
设置了浮动(float不为none), 绝对定位(position不为static或者relative)，以及inline-block之后，都会产生新的BFC。详情见文档 - BFC。也就是说你的box创建了新的BFC,但是他并没有内容(后代元素)，所以他的宽度就为0啦，如果你没设置的话。
同理，inine也会创建出一个IFC。如果没内容的话，大小也是为０的，如果你没设置的话。
3 回答5.2k 阅读✓ 已解决
5 回答2.1k 阅读
2 回答2k 阅读✓ 已解决
1 回答3.1k 阅读✓ 已解决
3 回答2.5k 阅读
2 回答1.1k 阅读✓ 已解决
2 回答2.2k 阅读
inline.内联元素。。宽度根据元素的内容来定。