005-CSS浮动布局&盒模型

一、CSS 浮动介绍

（一）、浮动的介绍

浮动元素会脱离文档的普通流,根据float的属性值向左或向右移动，直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块级元素表现得就像浮动元素不存在一样

（二）、浮动的原理

浮动"从流程中被移除出来", 但是与绝对位置的元素（层次）不同，浮动是在他们前面的最后一个块元素之后直接被显示出来（就像块盒一样）。如果该浮动是在一个“行块”中，该浮动的上边界被放置在行块顶部的水平上。当除此以外，浮动与绝对元素相似，原先的块盒会完全忽略浮动和AP元素。那些静态的块盒知识保持一个接一个地”跟随“，就好像没有浮动不在那里一样

（三）、浮动的实现

<!-- html -->
<div class="left"></div>
<div class="right"></div>

/* css */
div {
    width: 100px; height: 100px; background: red; }
.left {
    float: left; }
.right {
    float: right; }

（四）、浮动的影响

• 浮动元素会造成父元素塌陷
  当给元素设置float之后，元素脱离文档流，父元素没有设置height，造成塌陷
• 浮动元素的左(右)外边界不能超出其父元素的左(右)内边界
  在不设置margin为负值和父元素还有剩余空间的情况下,浮动元素的外边界(margin)不会超出父元素的内边界(padding)
• 浮动元素不会重叠
• 浮动元素的顶端不能比其父元素的内顶端更高，不能比之前出现的浮动元素顶端高

二、CSS 清除浮动

既然浮动会给整个Html布局带来一定的影响，那么就必须要清除浮动

（一）、clear属性

可在浮动元素的父级最后添加一个样式为clear:both空标签

<div style='clear:both;'></div>

• 属性值
  • none：默认值。允许浮动元素出现在左右两侧
  • left：在左侧不允许浮动元素
  • right：在右侧不允许浮动元素
  • both：在左右两侧不允许浮动元素
  • inherit：继承父元素的clear属性值

（二）、overflow属性

可在浮动元素的父级添加样式overflow:hidden;

<div class='parents' style='overflow:hidden;'>