less
*{
margin:0;
padding: 0;
border:0;
}
ul,li{
list-style: none;
}
div{
1000px;
margin:0 auto;
overflow: hidden;
>a{
float:left;
200px;
height:50px;
line-height: 50px;
background: red;
}
>span{
float:right;
200px;
height:50px;
line-height: 50px;
background: orangered;
}
}
section{
1000px;
margin:0 auto;
position: relative;
margin-top:100px;
//
&:after{
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
>a{
position:absolute;
left:0;
top:0;
200px;
height:50px;
line-height: 50px;
background: red;
}
>span{
position: absolute;
right:0 ;
top:0;
200px;
height:50px;
line-height: 50px;
background: orangered;
}
}
//行内元素，一旦设置float,position，就会变成块级了，
//。就不用在写display:inline-block;
//float: 用这个overflow
//position: overflow。清除不了元素，添加伪类：
//after{
// content: "";
// height:0;
// display: block;
// clear: both;
//}
//以 position: relative;为基点。设置position: absolute，可堆叠;
//用z-index 调整顺序的显示；并且只对同级标签有用。
清除缓存的方法：
给父容器添加 clearfix 的 class ，用 伪元素 clearfix：after 来设置样式，清除浮动
给父容器添加 overflow:hidden 或者 auto 样式;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例练习</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div>
<a href="">asdfasdf</a>
<span>dsfdg</span>
<p>dfsljgslfd</p>
</div>
<section>
<a href="">afsdf</a>
<span>dskafjasl</span>
<p>dajfsljfals</p>
</section>
</body>
</html>