HTML+CSS小细节

HTML+CSS问题及解决方

一、神奇的overflow:hidden

overflow:hidden的作用：解决溢出问题、外边距塌陷、清除浮动。
1. 使用overflow：hidden溢出隐藏
默认情况下，父元素div的高度是auto，他可以被子div任意撑大。但当一个父元素的宽高都固定时，如果他的子div的高度超过了这个值，那么子div就会挣脱父div的束缚，这就是溢出。此时我们可以给父div加上overflow：hidden，这样子元素的溢出部分就会隐藏。
2. 使用overflow：hidden清除浮动
一般而言，父元素不设置高度时，其高度随着内容的高度自适应。但是当父元素内的子元素设置浮动之后，子元素就会脱离标准文档流、不占位，从而导致父元素检测不到子元素的高度，从而导致了高度坍塌。由于父元素没有高度，下面的元素就会顶上去，因此需要给父元素加overflow：hidden，从而让父级的高度随着子级和子级内容的高度来自适应。
3. 使用overflow：hidden解决外边距塌陷
父元素内有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，从而造成外边距塌陷
。此时给父元素加上overflow：hidden就可以解决这个问题。

二、高度塌陷问题

造成原因：在常规流文档中，父元素的默认高度是被子元素的高度撑开的，也就是说子元素多高父元素就多高，但是当子元素设置浮动之后，子元素就会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，就会导致高度坍塌。
解决方法：

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

三、BFC(块级格式化上下文)

BFC是英文Block Formatting Contexts的缩写形式，翻译成汉语是“块级格式化上下文”。
从表面上看，具有BFC的元素和其他普通的容器没有什么大区别，但从具体的功能上看，BFC元素可以看做为一个独立的容器，使容器内部的元素不会影响到外部的布局，反之亦然。

• 规则：

1. 内部的盒子会在垂直方向一个一个一次排列；
2. 属于同一个BFC的两个相邻box的上下margin会发生重叠；
3. 每个元素的左边与包含盒子的左边相接触、浮动也一样；
4. BFC区域不会与float重叠；
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反过来也一样；
6. BFC计算高度时浮动元素也参与计算；

• 怎么样触发BFC?

1. 根元素；
2. float属性不为：none；
3. position属性为：absolute或fixed；
4. overflow不为visible；
5. display为inline-block、flex、table-call、table-caption

四、浮动与定位元素

定位

• position：relative（相对定位）

1.当元素设置了相对定位而不设置偏移量时，元素位置不会发生任何变化。
2.相对定位是相对于元素原来文档流的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质，块级还是块级，行级还是行级

• position：absolute（绝对定位）

1.当元素设置了相对定位而不设置偏移量时，元素位置不会发生任何变化。
2.决定定位会使元素脱离文档流
3.决定定位是相对于离他最近的一个祖先定位元素进行定位的，如果所有的祖先元素都开启了绝对定位，则会相对于浏览器的窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质，行级元素会变成块级元素，块级元素的宽高默认被内容撑开。

• position：fixed（固定定位）

1.固定定位是绝对定位的一种，他的大部分特点都和绝对定位一样
2.固定定位是相对于浏览器视口进行定位
3.固定定位是固定在浏览器窗口的某个位置，不会随着滚动条的滚动而滚动

浮动

• 什么是浮动？
  浮动的出现其实是为了实心文字环绕的效果。
  浮动使元素脱离文档流，按照指定方向发生移动，遇到父级边界或相邻的元素停下来。
• 浮动的特征：

1. 脱离文档流
2. 可以使元素向左或者向右移动，不能上下移动；
3. 浮动元素碰到包含框或者另一个浮动元素，浮动停止；
4. 浮动会造成文字环绕效果；
5. 块级元素会无视浮动元素；

什么是文档流

文档流实际上是指css世界中的一种基本的定位和布局机制，与我们现实生活中的流水是一样的，在现实生活中，如果我们让水注入一个容器中，水面一定是平的，如果向其放入木块，水位就会升高，而木头会顺序排列，映射到css世界中，HTML元素按照文档正常排列，（默认从左到右，从上到下）如果图片文字一次排列超出的区域则换行。说白了文档流就是按照正常的文本流向。。。
而float会使元素脱离文档流，也就是说设置float的元素可以脱离原本的文档流向布局排列。float浮动会使父元素的高度发生坍塌，使元素不占用普通流的位置。