js笔记 5：清除默认样式，高度塌陷 BFC，外边距重叠，清除浮动

清除默认样式

1-input获取焦点后 ，除去默认边框 ： outline: none

浮动

1-特点：
浮动元素会完全从文档流中脱离，不再占用文档流的位置
设置浮动后，元素会向 父元素 的左或右偏移
默认不会从 父元素 中 脱离
浮动后，不会超过它前边的元素，最多一样高
块元素浮动不会独占一行，宽度高度默认被内容撑开
行内元素浮动后会变成块元素，宽度高度默认被内容撑开
2- 可以实现 文字环绕效果：利用浮动实现文字环绕图片的效果

高度塌陷 BFC 清除浮动

父元素的高度默认被子元素撑开，浮动布局中，当元素发生浮动，脱离文档流，将无法撑起父元素的高度，就会导致 父元素 失去高度，发生高度塌陷
1-解决方式：开启 BFC

• BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
• 开启BFC该元素会变成一个独立的布局区域
• 开启BFC后的特点：
  ** 开启BFC的元素不会被浮动元素所覆盖
  ** 开启BFC的元素子元素和父元素外边距不会重叠 （外边距重叠）
  ** 开启BFC的元素可以包含浮动的子元素
• 开启元素的BFC：
  1- 设置元素浮动：使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
  2-设置元素绝对值
  3-设置元素伪inline-block： 可以解决问题，但