CSS清除浮动和定位

1.原来在一行中的两个块，会因为浏览器窗口的大小改变而改变其原来的位置（变成多行），浏览器窗口宽度不够容纳
解决方法：加个父div,并且设置宽度

.father {
width:500px;
height:300px;
}
<div class="father">
   <div class="left">左</div>
   <div class="right">右</div>
</div>



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

none:默认值。允许两边有浮动对象
left：不允许左边有浮动对象
right：不允许左边有浮动对象
both：左右两侧不允许有浮动对象

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

(1)额外标签法（末尾加个空盒子）
W3C建议在容器的末尾增加一个“clear:both”的元素，强迫容器适应它的高度以便装下所有的float元素

.father {
width:500px;
clear:both;
}
<div class="father">
   <div class="left">左</div>
   <div class="right">右</div>
   <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="father clearFix">
   <div class="left">左</div>
   <div class="right">右</div>
   <div class="clear"></div> 增加一个空div
</div>

cursor:pointer;

本文出自 “点滴积累” 博客，请务必保留此出处http://tianxingzhe.blog.51cto.com/3390077/1708308