设置display:block后div仍水平排列子元素的原因是什么？

display: block是div元素的默认display属性值，正常情况下块级容器内的块级子元素会垂直排布，出现该异常通常是以下原因导致：

• 子元素设置了浮动属性
  若子元素添加了float: left或float: right，会脱离普通文档流沿父容器边缘水平排列，此时父元素设置display: block不会改变浮动元素的排布规则，通常还会伴随父元素高度塌陷问题。
• 子元素被修改了默认display属性
  div作为子元素时默认display值为block，会独占一行垂直排列；如果子元素被手动设置为display: inline、display: inline-block、display: table-cell这类非块级显示模式，就会按照行内元素、表格单元格规则水平排布，该表现和父元素是否为block无关。
• 编写的display: block样式未实际生效
  这类问题大多由CSS选择器优先级不足导致：如果有优先级更高的规则（比如ID选择器、行内样式、带!important标记的规则）已经给当前父div设置了display: flex、display: inline-flex、display: grid这类默认横向排布的布局模式，你写的display: block会被直接覆盖，不会产生效果。后续编写的

  display: flex;
  flex-direction: column;
  

  如果选择器权重足够，就会覆盖原有样式，实现纵向排列。
• 存在全局样式或第三方框架样式干扰
  很多CSS重置文件、第三方UI框架会给特定元素、通用类名设置统一布局规则，比如给容器默认设置flex横向布局、给子项设置浮动或inline-block属性，很容易和手动编写的样式产生冲突。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture