溢出，浮动与间距

CSS

溢出隐藏overflow：


可分为overflow-x以及overflow-y

属性

visible 不剪切内容也不添加滚动条

hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll 总是显示滚动条

auto 超出自动显示滚动条 不超出不显示

注：有定位的盒子慎用overflow：hidden；会隐藏多余部分

white space 属性设置如何处理文本中的空白符

属性
normal 默认值
pre 空白和换行会被浏览器识别
nowrap 文本不会换行 直到<br>标签

BFC块级格式化上下文

1.内部的box会在垂直方向，一个接一个放置
2.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的box的margin会发生重叠
3.每一个元素的margin box的左边，与包含块border box的左边相接触
4.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
5.BFC计算的区域不会与float box重叠
6.计算BFC的高度时，浮动元素也参与计算

触发BFC的元素

1.根元素HTML
2.float属性不为none；（left right）
3.position为absolute或fixed；
4.display为inline-block,flex；
5.overflow不为visible;（auto hidden scroll）

浮动

float:none/left/right;(脱离文档流)

会将元素转换成行内块元素

清除浮动

选择器{clear：属性值；}

left 清除左侧浮动

right 清除右侧浮动

both 清除两侧浮动（一般只用这个）

注：

banner左右溢出时给父元素relative相对定位并添加overflow:hidden;

当子元素浮动时父元素高度塌陷:

1.给父元素添加overflow:hidden;

注： 使用文本溢出属性触发了BFC

2.在浮动的子元素后面加空标签并添加clear:both;(清除浮动,打破横向排列)

3.div(塌陷的盒子):{content:"*",display:block;clear:both;}(万能清除法)

或

.clearfix:after{

  content:"";

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix{

*zoom:1;

}(兼容性问题 需要添加  i6、i7专有)

4.双伪元素清除浮动

.clearfix:before,.clearfix:after{

  content:"";

display:table;（转换成块元素并一行显示 用block会分行）

}

.clearfix:after{

clear:both;

}

.clearfix{

*zoom:1;

}(兼容性问题 需要添加)

外间距margin（内间距padding同理 但不能取负值且会把盒子撑大）:

margin-top 外上间距

margin-right 外右间距

margin-bottom 外下间距

margin-left 外左间距

简写：

{margin：1 2 3 4}上 右 下 左

{margin：1 2 3 }上 左右 下

{margin：1 2 }上下 左右

{margin：1 }上下左右 （属性可给负值）

margin：0 auto 横向居中

注：

margin-top会传递给父元素

  给最近父元素添加border-top（border-top：1px solid（实线） transparent（透明色））

  给最近的父元素添加overflow：hidden；

margin外间距重叠

  给下面盒子添加父元素且添加overflow：hidden；