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

main中的righ块,增加了右浮动,margin-left就不起作用了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>混合布局编程挑战</title>

<style type="text/css">

body{ margin:0; padding:0; font-size:30px; color:#fff}

.top{background:grey;height:100px;}

.main{background:red;height:400px;}

.left{ background:blue;width:200px;position:absolute;left:0;top:100px;height:400px;}

.right{background:green;float:right;margin-left:210px;height:400px;}

.foot{clear:both;background:orange;}

</style>


</head>


<body>

<div class="top">top</div>

<div class="main">

    <div class="right">right</div>

    <div class="left">left</div>

</div>

<div class="foot">foot</div>


</body>

</html>

谁能给我解析下为什么?

浮动不是也是成为了一个块吗?为何做外边距没有作用了?

正在回答

3 回答

肯定是啊 都浮动了 没有参照物了

0 回复 有任何疑惑可以回复我~

其实是有作用的,只是因为你右侧的盒子左边什么都没有。。你设置这个margin-left根本不会去改变什么。你在right盒子的左侧放一个盒子,再改变你的margin-left,就可以看出效果来了。

0 回复 有任何疑惑可以回复我~

main中,左边的left是绝对定位,距离左边为0;右边的right是右浮动,距离右边为0.那么你这个时候,设置right的margin-left的时候,其实是相对于main的左边框的。210px加上right的width显然不会超过main的总宽度。所以你看不到效果

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
如何用CSS进行网页布局
  • 参与学习       209624    人
  • 解答问题       1153    个

用最简洁的案例教你布局的那些知识,这是前端工程师基本技能

进入课程

main中的righ块,增加了右浮动,margin-left就不起作用了

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