CSS基础：浮动特性，清除浮动，定位的使用

浮动

1. 你浮我也浮，我们才能在一起。若同级元素不连续浮动，则两两看成一组分析。

2. 因为我们是浮起来的，所以不占用位置，我们下面空空如也。

3. 左浮的左，右浮的右，他们基于自己父元素的左右边界，跨越不了内边距padding。

4. 一般情况下，浮动只会影响后面的元素，不会影响前面的元素。

5. 浮动可以让元素默认从块级转行内，行内转块级，块级元素不设置宽度自动占用一行，但浮动后，具体宽度为填充内容的宽度，行内元素设置不了宽高，宽高取决于内容，浮动后可以设置宽高。

6. 浮动元素后的文字图片，不会脱离标准文档流。

7. 定位或者浮动的盒子，margin：0 auto；失效。

 

清除浮动，避免影响其他元素

1. 添加父元素，并且根据子元素设置父元素高度的情况

2. 在父亲元素不方便设置高度的情况(装有不确定数量的文字时，子元素高度是不确定的，这时父元素的高度就无法具体设置)

针对第二种情况，清除浮动的方式：

1. 额外标签法

   在同级浮动元素的最后，新增标签，添加clear:both；

2. 父级overflow法

   在浮动元素的父级元素上，添加overflow:hidden|auto

3. 父级类名after伪元素法

   通常定义clearfix的类，添加clearfix:after{content:'';display:block;height:0;visibility:hidden;clear:both;}

   IE6,7的写法：clearfix:after{*zoom:1;}

4. 父级类名before，after双伪元素法

   通常定义clearfix的类，添加

   clearfix:before,clearfix:after{content:'';display:table;}

   clearfix:after{claer:both};

    

浮动的应用场景：布局

使块级盒子能够一行显示，快速定位到左边或者右边。

 

定位

定位方式有四种：

• static

• relative

• absolute

• fixed

relative定位

1.基于自己的左上角发生偏移，并且原来的位置保留，也就是说，当后面的块级元素不会向上移而占用自己原来的位置。

absolute定位

1.基于具有fixed,absolute,relative的最近的父级元素发生偏移，原来的位置不保留，也就是说，与absolute同级的后面的块级元素会发生上移，占有自己原来的位置。一般搭配使用子绝父相的方式

2.找不到具有定位属性的父级元素，根据浏览器可视区的左上角发生偏移。

fixed定位

1.不论父级元素有没有定位，具有fixed定位的元素基于浏览器可视区发生偏移，不随滚动条变化而变化，并且不占优原来位置。

不管是哪一种定位都会发生隐式转化，转化成行内块元素。

---

为什么使用子绝父相？

子元素使用绝对定位嘛，不占用其他布局元素的位置。

父元素为什么要相对定位呢？不加定位可不可以？

不加定位肯定是不可以的，因为具有absolute的子元素会寻找离自己更多的定位元素进行对位，这肯定不符合布局的预期。

那使用父元素使用绝对行为行不行？

一般不行。除非你与父元素同级的后面的元素不存在，否则，因为absolute的不占空间的特性，后面的元素就会向上移，占有自己原来的位置。

fixed定位呢？这个功能上不符合。毕竟一直悬挂在屏幕的固定位置，不会随着滚动条的变化而消失。

 

absolute定位与外边距的区别？

定位可以发生偏移，而外边距也能使元素发生偏移，那为什么还要使用定位呢？

1. 使用外边距使元素产生偏移时，同级元素之间不能产生层叠的效果，而使用定位则可以。

2. 虽然都是作为子元素，但有些子元素使用定位效果，本质在于子元素内容逻辑不同，有些内容对象用于功能性的视觉效果，有的是内容性的图片文字展示效果。

3. 定位元素脱离标准流，不影响其他元素的布局。

 

使用定位的盒子如何在父元素的水平垂直居中？

1. 首先margin：0 auto；使用失效。

2. left：50%;或者top:50%;这样偏移肯定是超多中心点的位置

3. 再利用margin-left:-自身元素的宽度的一半或者margin-top:-自身元素高度的一半