问答详情
源自：13-4 起飞咯 - 浮动模型

浮动元素并列后，怎么不并列下去？

<!DOC TYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>	浮动模型</title>
<style type="text/css">
div{
	width:200px;
	height:200px;
	padding:30px;
	border:1px red solid;
	margin:30px;
	float:left;
}


</style>
</head>
<body>
	<h1>浮动元素并列一行</h1>
        <div id="div1">元素1</div>
        <div id="div2">元素2</div>
        <div id="div3">元素3</div>

    <h1>再另起一行</h1>
    <p>三年级时，我还是一个胆小如鼠的小女孩</p>

    <div>元素4</div>

    <h1>能再跳一行吗？</h1>

</body>
</html>

http://img.mukewang.com/573871410001955213610615.jpg

上面是代码，下面是浏览器里的效果。为什么三个div并列以后，下面的内容还是继续并列呢？怎么改变，继续编辑下去？求大神详细解答原因~

提问者：女怕入错行 2016-05-15 20:55

个回答

  • 凯说惠很美
    2016-05-15 22:06:14
    已采纳

    用完浮动之后，要把浮动清除了，在那三个div代码后面加上一句<div style="clear :both;"></div>

    0
  • qq_爱西红柿_0
    2016-05-16 18:00:50

    加个ID 用一个大div为包住它们三个，并且设置大div 宽度100%，；

    0
  • 慕勒7915654
    2016-05-15 21:22:56

    这个是与前面的div并列在一行的啊，只是元素4上面加了“

    <h1>再另起一行</h1>

        <p>三年级时，我还是一个胆小如鼠的小女孩</p>

    ”而已嘛

    0
  • 宇宙超级无敌圆圈圈
    2016-05-15 21:13:04

    不是clear:both吗？

    0