float浮动/定位

一、float

如果把下图一中红色的设置了float：left，就会出现图二的状况

 .div1{
            width: 200px;
            height: 150px;
            background-color: red;
            {#float: left;#}
        }
        .div2{
            width: 300px;
            height: 200px;
            background-color: chartreuse;
        }

图一.png

图二.png

二、清除浮动clear

clear:left清除左侧浮动，不允许左侧有浮动，依次类推

.clearfix:after {             <----在类名为“clearfix”的元素内最后面加入内容； 
content: ".";                 <----内容为“.”就是一个英文的句号而已。也可以不写。 
display: block;               <----加入的这个元素转换为块级元素。 
clear: both;                  <----清除左右两边浮动。 
visibility: hidden;           <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已； 
line-height: 0;               <----行高为0； 
height: 0;                    <----高度为0； 
font-size:0;                  <----字体大小为0； 
} 
.clearfix { *zoom:1;}         <----这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。/  

三、定位

• relative 相对定位

相对自己原先的位置定位,移动了top200px

.div1{
            width: 200px;
            height: 150px;
            background-color: red;
            position: relative;
            top: 200px;
        }
        .div2{
            width: 300px;
            height: 200px;
            background-color: chartreuse;
        }

image.png

• ablsolute

绝对定位，相对于已定位的最近的祖先元素定位，如果没有就默认为body元素

 .div1{
            width: 200px;
            height: 150px;
            background-color: red;
            position: relative;
        }
        .div2{
            width: 300px;
            height: 200px;
            background-color: chartreuse;
            position: absolute;
            top: 200px;

        }

image.png

• fixed

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。