CSS清除浮动和定位-白红宇

1.原来在一行中的两个块，会因为浏览器窗口的大小改变而改变其原来的位置（变成多行），浏览器窗口宽度不够容纳

解决方法：加个父div,并且设置宽度

.father {

width:500px;

height:300px;

}

</div>

2.清除浮动clear

当元素有浮动属性时，会对其父元素或后面的元素产生影响，出现一个布局错乱的现象。

none:默认值。允许两边有浮动对象

left：不允许左边有浮动对象

right：不允许左边有浮动对象

both：左右两侧不允许有浮动对象

当父元素没有指定高度时，并且它的子元素有浮动，这时这个父元素的高度不会自适应

(1)额外标签法（末尾加个空盒子）

W3C建议在容器的末尾增加一个“clear:both”的元素，强迫容器适应它的高度以便装下所有的float元素

.father {

width:500px;

clear:both;

}

<div class="clear"></div> 增加一个空div

</div>

(2)溢出的使用(overflow)

给父盒子加个 overflow:hidden属性，最简单的清除浮动方法，如果子元素使用了定位布局，超出的内容看不到

(3)绝对定位和相对定位

position:absolute;relative;fixed(固定在页面某个位置)

绝对定位：将对象从文档流中分离出来，通过设置left,right,top,bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象

相对定位与绝对定位

绝对定位是父元素为基准点，进行定位---会脱离文档流
相对定位是根据其自身为基准点，进行定位---离开原位置，但还占着原来空间

当我们想要使用绝对定位时：必须要有两个条件

1.必须给父元素加定位属性，一般建议使用position:relative;

2.给子元素加绝对定位position:absolute;同时要加方向属性

#main ｛

width:700px;

margin:0 auto;

background:pink;

overflow:hidden;

position:relative;

｝

#left ｛

width:200px;

height:200px;

background:red;

position:absolute;

top:100px;

left:-100px;

｝

(4)伪对象after清除浮动，网上最流行(相当于在父盒子尾部加个隐藏的div）

.clearFix:after{

clear:both;

display:block;

visibility:hidden;

height:0;

line-height:0;

content:"";

}

<div class="clear"></div> 增加一个空div

</div>

cursor:pointer;

本文出自 “” 博客，请务必保留此出处