为什么这串代码中 没有用 clear:both 清除第一个div浮动,而是使用右浮动 float:right 就能让两个div 分行?

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>不定宽块状元素水平居中</title>

<style>

.container{

    float:left;

    position:relative;

    left:50%;

}


.container ul{

list-style:none;

margin:0;

padding:0;

    position:relative;

    left:-50%;

}

.container li{float:left;display:inline;margin-right:8px;}


/*下面是代码任务区*/

.wrap{

    position:relative;

    float:right;

    right:50%;

}

.wrap-center{

    background:#ccc;

    position:relative;

    right:-50%;

}

</style>

</head>


<body>

<div class="container">

<ul>

    <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

    </ul>

</div><br>


<!--下面是代码任务区-->

<div class="wrap">

    <div class="wrap-center">我们来学习一下这种方法。</div>

</div>

</body>

</html>


Parmer
浏览 1743回答 4
4回答

李晓健

确实没有覆盖

echo_kinchao

只要没有影响到 其实可以不写

LUCK星001

clear;both;是清楚浮动的; 当第一个div向左浮动的时候,那么后面的div也会跟着向左浮动啊,因此就会出现被覆盖掉;float:left;就不受position:relative;的影响了,如果你想让第二个居中的话.wrap{  text-align:center;   }.wrap-center{    background:#ccc;}
打开App,查看更多内容
随时随地看视频慕课网APP