浮动会带来的麻烦事

解决高度塌陷

---

父元素在文档流中会默认被子元素撑开 如果此时给子元素添加浮动效果 子元素就会脱离文档流 从而造成父元素的高度塌陷 此时页面便会混乱 如果给父元素设置高宽便会使父元素锁死 不能随子元素变化随意撑开 会有子元素溢出情况

解决方案 开启BFC

BFC开启后具有的特性

1.父元素的垂直外边距不会和子元素重叠

2.开启的BFC元素不会被浮动元素覆盖

3.开启的BFC元素可以包含浮动的子元素

如何开启元素的BFC<与IE6不兼容>

1.设置元素浮动

2.设置元素的绝对定位

3.设置元素的inline-block(不推荐使用)

4.将元素的overflow设置为一个非visible的值(不为默认值)

haslayout支持IE6

设置zoom:1

浏览器兼容开启BFC

同时设置：

overflow:hidden

zoom:1

---

清除浮动

clear属性可以清除元素周围的浮动对元素的影响 元素不会因为上方出现了浮动元素而改变位置 可选值有：

left：忽略左侧浮动

right：忽略右侧浮动

both：忽略全部浮动 清除影响较大的那个浮动

none：不忽略浮动，默认值

---

解决高度塌陷方案二：

可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的

然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用

使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构

---

<推荐使用>

解决高度塌陷方案三

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，

这样做和添加一个div的原理一样，可以达到一个相同的效果，

而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

---

定位

定位：

- 定位指的就是将指定的元素摆放到页面的任意位置

通过定位可以任意的摆放元素

- 通过position属性来设置元素的定位

-可选值：

static：默认值，元素没有开启定位

relative：开启元素的相对定位

absolute：开启元素的绝对定位

fixed：开启元素的固定定位（也是绝对定位的一种）

相对定位

当元素的position属性设置为relative时，则开启了元素的相对定位

1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

2.相对定位是相对于元素在文档流中原来的位置进行定位

3.相对定位的元素不会脱离文档流

4.相对定位会使元素提升一个层级

5.相对定位不会改变元素的性质，块还是块，内联还是内联

当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量

left：元素相对于其定位位置的左侧偏移量

right：元素相对于其定位位置的右侧偏移量

top：元素相对于其定位位置的上边的偏移量

bottom：元素相对于其定位位置下边的偏移量

通常偏移量只需要使用两个就可以对一个元素进行定位，

一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

绝对定位

当position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位：

1.开启绝对定位，会使元素脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

3.绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位，都会同时开启父元素的相对定位）

如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

4.绝对定位会使元素提升一个层级

5.绝对定位会改变元素的性质：

内联元素变成块元素，

块元素的宽度和高度默认都被内容撑开

没有完美的解决方案 只有影响相对小的解决方案