CSS-布局笔记摘抄

[浮动]

使用float来设置元素浮动

可选值

• none - 默认值，不浮动，元素在文档流中
• left
• right

特点

1. 元素浮动以后会完全脱离文档流
2. 浮动以后元素会一直向父元素的最上方移动
3. 直到遇到父元素的边框或者其他的浮动元素，会停止移动
4. 如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素
5. 浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐
6. 浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果

浮动以后元素的特点

块元素

块元素脱离文档流以后不会独占一行，宽度和高度被内容撑开

内联元素

内联元素脱离文档流以后变成块元素

高度塌陷

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也会导致父元素的高度塌陷。父元素的高度一旦塌陷所有元素的位置将会上移，导致整个页面的布局混乱。

解决办法

方法一：
开启父元素的BFC（Block Formatting Context 块级格式化环境）

• 开启BFC的方式：

1. 设置元素浮动
2. 设置元素绝对定位
3. 设置元素的类型为inline-block
4. 设置overflow为一个非默认值，如overflow: hidden

• 开启BFC以后元素的特性：

1. 父元素的垂直外边距不会与子元素重叠
2. 开启BFC的元素不会被浮动元素所覆盖
3. 开启BFC的元素可以包含浮动子元素
   开启hasLayout，在IE6中开启hasLayout来解决高度塌陷的问题

• 开启方式：zoom：1；为当前元素设置宽度非默认值时，会自动开启hasLayout
  方法二
  在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动
  <div class=“box1”>
  <div class=“box2”></div>
  <div style="clear:both”></div>
  </div>
  缺点是会在页面中添加多余的结构
  方法三
  使用after伪类，向父元素后添加一个块元素，并对其清除浮动
  .clearfix:after{
  content:””;
  display:block;
  clear:both;
  }
  .clearfix{
  zoom:1;
  }
  和方法二原理一样，但不用向页面中添加多余的结构