为了账号安全,请及时绑定邮箱和手机立即绑定

关于css浮动清除

<!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-center{

    background:#ccc;

    position:relative;

    left:-50%;

    

    

    

    

}

.wrap{

    position:relative;

    left:50%;

    float:left;

    clear:both;

    

    

    

}

</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>


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

<div class="wrap">

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

</div>

</body>

</html>

为什么给.wrap加上浮动还要清除浮动



正在回答

1 回答

在.wrap中添加一行clear:both,

作用是清除两侧浮动,独占一行,

这样“我们来学习一下这种方法”这句就不会把“1 2 3”这句遮住,

你可以试试把 clear:both 注释掉看看会有什么效果

1 回复 有任何疑惑可以回复我~
#1

慕田峪9304305 提问者

非常感谢!
2018-06-02 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1226211    人
  • 解答问题       18236    个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

关于css浮动清除

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信