关于清除浮动、css定位的学习

浮动及清除浮动

浮动最初的目的：实现文字环绕；

浮动具有破坏性，会破坏父元素高度（类似的还有：display：none；position：absolute/fixed/sticky）

浮动适合流体布局：

 

.mib_head_a { width: 56px; float: left; }  

/* 下面这个是固定布局写法 */

.mib_feed_fixed { width: 484px; float: right; }

/* 下面这个是流体布局写法 */

.mib_feed_flow { margin-left: 76px; }

 

css清除浮动的属性：clear属性   

属性：left（清除左侧浮动元素）

      right（清除右侧浮动元素）

      both（清除两侧浮动元素）

      none（不清除浮动元素）

clear通常的应用形式：

（1）HTML block水平元素底部

-<div> </div>

（2）CSS after伪元素底部生产

-.clearfix：after{}

【应用在包含浮动子元素的父元素上】

浮动清除：BFC/haslayout

 

 

 

 

CSS定位（与float属性协同作用）

Position 中文意为位置，css定位的核心属性（CSS-P）

Position属性取值：

   static（静态）

   absolute（绝对）

   relative（相对）

   fixed（固定）

 

静态定位（static）

默认状态下元素确定自身位置，无法通过坐标值（up、bottom、left、righ）来改变其位置。

 

绝对定位（absolute）

将元素拖出文档流，根据某个参照物坐标来定位其位置。绝对定位可结合坐标值（up、bottom、left、righ）进行精确定位，结合z-index属性排列元素的覆盖顺序，结合clip和visiblity属性裁切、显示或隐藏元素对象或部分区域。

Ps：clip 用来设置元素形状（如裁剪图片），语法举例

         object.style.clip：rect（top，right，bottom，left）；

   visiblity规定元素是否可见，语法举例

         object.style.visiblity=“hidden”；

 

相对定位（relative）

使元素在不脱离文档流，却能通过坐标值以原始位置为参照物今夕偏移。

相对定位元素虽然偏移了原始位置，但其原始位置所占据的空间任然保留。

相对定位元素遇见文档流对象，他就会覆盖文档流中的对象。并且，相对元素间也会存在覆盖现象。

 

 

固定定位（fixed）

定位的一种特殊形式，以浏览器的窗口为参照物来定义网页元素。元素若以固定显示，则不受文档流影响，不受包含块位置的影响，始终以浏览器窗口来定位自己的显示位置。（网页中那些烦人的、关不掉的小广告0.0）

 

 

定位参照（参照物和坐标值）

 

不仅是浏览器，所有被定义了相对定位、绝对定位的元素都可以作为CSS定位参照物来确定其坐标。

Sometimes，我们把具备CSS定位参照物的元素称为包含块。