视觉格式化模型--浮动

浮动的基本特点

• • left:左浮动,元素靠左靠上;
  • right:右浮动,元素靠右靠上
  • none:默认值
• 2.当一个元素浮动后,元素必定成为块盒(display=block)
• 3.浮动元素的包含块和常规流一样,为父级元素的内容盒

盒子尺寸

• 宽度为auto时,表示适应内容宽度
• 高度为auto时,与常规流一致,适应内容的高度
• margin为auto时,为0
• border padding百分比设置与常规,常规流一致

盒子排列

• 浮动盒子在包含块中排列时,会避开常规流块盒
• 常规流块盒在排列时,会忽略浮动盒子
• 行盒在排列时,会避开浮动盒子
• 若文字不在行盒中,浏览器会自动生成一个 匿名行盒 包裹文字,

高度坍塌

• 原因:常规流盒子的自动高度在计算时 不考虑盒子

• 解决:

  • ①使用清除浮动
  • 涉及属性:clear
  • 哪个元素坍塌就给哪个元素的class添加clearfix类名,然后在style中写

         clearfix::after{
              content:"";
              display:block;
              clear:both;
          }
  

  • ② 块级格式化上下文(BFC)
    • 例如:overflow:hidden