浮动及清除浮动
浮动最初的目的:实现文字环绕;
浮动具有破坏性,会破坏父元素高度(类似的还有:display:none;position:absolute/fixed/sticky)
浮动适合流体布局:
.mib_head_a { 56px; float: left; }
/* 下面这个是固定布局写法 */
.mib_feed_fixed { 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定位参照物的元素称为包含块。