HTML(WEB)开发day06
作者：gqk;
清除浮动:好比我们的浮动，有浮动开始，则就应该有浮动结束。
为什么要清除浮动?
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
准确地说，并不是清除浮动，而是清除浮动后造成的影响
如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。
清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
border: 1px solid red;
}
.son1{
height: 100px;
width: 100px;
background-color: pink;
float: left;
}
.son2{
height: 100px;
width: 100px;
background-color: yellow;
float: left;
}
.foller{
width: 400px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">1</div>
<div class="son2">2</div>
</div>
<div class="foller">3</div>
</body>
</html>
由于 浮动后 原有的位置没有了 所以产生一下的问题，
清除浮动的方法
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;}
额外标签法
html 是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。
父级添加overflow属性方法
~~~css 可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。 ~~~ 优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
使用after伪元素清除浮动
:after 方式为空元素的升级版，好处是不用单独加标签了
使用方法：
```css .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {zoom: 1;} / IE6、7 专有 */ ```
项目案例： 云道页面
定位(position)
那么定位，最长运用的场景再那里呢？ 来看几幅图片，你一定会有感悟
左右箭头压住图片：
如果用标准流或者浮动，实现会比较复杂或者难以实现，此时我们用定位来做，just soso！
元素的定位属性：（先确定定位模式，再去选择偏移量）
元素的定位属性主要包括定位模式和边偏移两部分
偏移量：
top | 顶端偏移量，定义元素相对于其父元素上边线的距离 | | bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 | | left | 左侧偏移量，定义元素相对于其父元素左边线的距离 | | right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
1、定位模式(定位的分类)
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{position:属性值;}
position属性的常用值
2，静态定位static:默认的定位方式
3，相对定位：relative：相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
以自己为基准进行偏移。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：
注意：
- 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
- 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）
- 不会脱标（定位后仍然在标准流里面）
4，绝对定位：absoult=========position：absoult 注意：定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
父级没有定位：会按照浏览器的窗口进行定位
父级有定位
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
总结：
子绝父相：这句话的意思是 子级是绝对定位的话， 父级要用相对定位
因为子盒子需要在 父亲的位置随意移动所以必须用绝对定位而且不占有位置，而父亲刚好相反，他本身占有位置，所以子绝对定位父亲相对定位
绝对定位的盒子水平/垂直居中
普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一个算法。
-
首先left 50% 父盒子的一半大小
-
然后走自己外边距负的一半值就可以了 margin-left。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father{
height: 300px;
width: 300px;
border:5px solid red;
position: absolute;
left: 50%;
margin-left: -150px;
top: 25%;
}
</style>
</head>
<body>
<div class="father">
</div>
</body>
</html>
5，固定定位：fixed（我帅 我说了算）（烦人的小广告）
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
固定定位有两点：
- 固定定位的元素跟父亲没有任何关系，只认浏览器。
- 固定定位完全脱标，不占有位置，不随着滚动条滚动.
ie6等低版本浏览器不支持固定定位。
