前端小结———关于定位和浮动的一些学习心得

对于刚开始学前端的来说，定位和浮动是在页面布局中一定会遇到的，你可能也会跟我一样会感觉有点晕乎乎，但是其实理解并实际操作之后就会理清楚他们之间的关系，并且很好的利用在页面布局当中。以下是我的一些学习总结，前端小白一枚，如有不足之处，还望各路大神多多指教。

• 定位（position）主要有以下几个：

1、static，静态定位，也是网页中默认的定位，属于在正常的文档流当中。

2、relative，相对定位，位置是相对于自己本身出发的，并且还会占据原来的位置，属于在正常的文档流当中

3、absolute，绝对定位，（盒子模型中，父元素不使用定位时）位置从浏览器出发，不占据原来的问题，会脱离正常的文档流

PS：子绝父相，父元素相对定位，子元素绝对定位，子元素的位置就是相对于父元素的，如果父元素没有相对定位，则子元素依然是相对于浏览器的。

4、fixed，固定定位，位置从浏览器出发，不占据原来的位置，并且会脱离正常的文档流，元素在使用固定定位之后，会转换成行内块元素，但是不推荐使用这个方法来转行内块。

• 浮动（float）

浮动是页面布局中常用的一种方式，主要通过左浮动（float:left）和右浮动(float:right)来实现元素的左右移动，同时周围的其他元素也会随着改变位置，并且浮动的元素会脱离普通的文档流而存在。所以如果元素使用浮动的话，后面的元素就会占据他原来的位置，就会造成布局混乱，整个页面就会乱，所以在使用浮动之后，就一定要清除浮动，以下是几种清除浮动的方法：

·1、使用带clear的空元素

在浮动元素的后面添加一个类名为clear的空的div（<div class="clear"></div>）,然后在CSS样式中对该类中清除浮动（clear:both）

2、使用overflow属性

给浮动元素的父级元素设置overflow:hidden或者overflow:auto，另外添加zoom:1或者设置容器的宽高。

3、使用CSS的伪元素after（推荐使用）

添加一个clearfix的类，并且将其设置成一个空的块级元素，如下所示：

当有浮动元素时，就给该元素的父级元素添加clearfix这个类，以此来清除浮动

PS：只要有左右浮动元素，就要为其添加一个父级元素，以此来清除浮动，避免布局乱