CSS的学习笔记③

一、清除浮动

①为什么要清除浮动？

1. 不是浮动不好；浮动本质是用来做一些文字混排效果的但被我们用来做布局用，则会有很多问题出现。
2. 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，就需要在该元素中清除浮动。
3. 准确的说，并不是清除浮动，而是清除浮动后造成的影响。

②清除浮动本质

清除浮动主要为了解决父级元素因为子级元素浮动引起内部高度为0的问题。

 

③清除浮动的方法

1.清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口，不让它们出来影响其它元素，所以叫做闭合浮动更好一点。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

2.额外标签法

优点：通俗易懂，书写方便

缺点：添加许多无意的标签，结构化较差。

3.父级元素添加overflow属性方法

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

4.使用after伪元素清除浮动

：：after方式为空元素的升级版，好处是不用单独加标签了

优点：符合闭合浮动思想结构语义化正确。

缺点：由于IE6、7不支持：after，使用zoom：1触发hasLayout，代表网站：百度，淘宝网，网易等。

注意：content：“.” 里面尽量跟一个小点，或者其他，尽量不要为空，否则在firefox7.0前的版本会有生成空格

二、定位

①文档流

指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块级元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

②关于定位

使用css的position属性来设置的定位类型，position的设置项如下：

1. relative生成相对定位元素，一般是将父级元素设置相对定位，子级元素设置绝对定位，子级元素就以父级元素作为参照来定位，否则子级元素相对于body来定位。
2. absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于浏览器窗口进行定位。
3. fixed生成固定定位元素，元素脱离文档流，不占据文档流的位置，可理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

③定位元素的偏移

定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

④定位元素层级

定位元素是浮动的正常的文档流之上，可以用z-index属性来设置元素的层级。

三、CSS权重

①css权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。

②权重的等级  ，分为以下等级：

1. 内联样式，如：style=“”，权重值为1000；
2. ID选择器，如：#content,权重值为100；
3. 类，伪类，如：.content、:hover权重值为10；
4. 标签选择器，如div、p权重值为1；

③权重的计算实例

实例一：

实例二：