浮动元素并列后，怎么不并列下去？-慕课网

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

来源：13-4 起飞咯 - 浮动模型

女怕入错行

2016-05-15 20:55

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

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

写回答关注

4回答

凯说惠很美

2016-05-15 22:06:14

已采纳

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

0 0
qq_爱西红柿_0

2016-05-16 18:00:50

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

0 0
慕勒7915654

2016-05-15 21:22:56

这个是与前面的div并列在一行的啊，只是元素4上面加了“
<h1>再另起一行</h1>
<p>三年级时，我还是一个胆小如鼠的小女孩</p>
”而已嘛

0 0
宇宙超级无敌圆圈圈

2016-05-15 21:13:04

不是clear:both吗？

2 0

宇宙超级无敌... 回复女怕入错行

你下面4个div都写了id了，为啥不利用，div4{clear:both}，学下去就知道了

2016-05-15 22:12:49

共 2 条回复 >