浮动的问题 | 零基础学HTML（十七）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

• 浮动的元素没有margin塌陷

  • margin塌陷现象出现在标准流中，浮动元素已经脱离了标准流，不再具有margin塌陷现象

• 浮动的元素会让出标准流位置

  • 元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素（即第一个盒子设置浮动，第二个不设置浮动） 注意：由于浏览器中有兼容问题（IE7以下的浏览器），不会使用这种属性制作压盖效果，真正的压盖效果使用后期学习的定位制作；如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动

• 字围现象

  • 与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载（比如百度百科的排版）

• 浮动存在的问题：

  • 标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高，如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父级的
  • 父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边