Question

我有5个段落标记，它们都使用CSS类相互浮动。

当我添加我的第6段标记时，我假设并希望它向下移动，但它会漂浮在另外5个旁边。

我创建了这个jsfiddle，所以你可以看到我到目前为止所拥有的， <http://jsfiddle.net/rtze3a8g/1/>

基本上我正在尝试设计我自己的标签栏。

这是新的，所以我希望我能正确解释。感谢您的耐心等待。

Answer 1

试试这个：jsFiddle

当你有浮动元素彼此相邻时，如果你想要一些浮动元素占据整行（作为＆＃39;块＆＃39;元素），你需要使用clear: both

Answer 2

你也可以使用clear：left来清除左边的

＆＃13;

* {
	margin: 0;
	padding: 0;
	}

html {
	font-size: 100%;
	}

body {
	font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	background: #6D9BF1;
	padding: 20px;
	}

#wrapper {
	font-size: 1.2em;
	line-height: 1.5em;
	background-color: #ffffff;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	}

p {
	margin-bottom: 1.5em;
    
	}
p.newLine{clear:left;}
p.ribbon{
	float: left;
	padding: 5px 10px 5px 10px;
	font-weight: bold;
	}

p.ribbon:hover{
	background-color: #87CEEB;
	color: white;
}

p.reset{
	float: none;
}

＆＃13;

<!DOCTYPE html>
  <title>Enter Title Here</title>
	<script>
		function newfunction(){
		}
	</script>
<body>
  <div id="wrapper">
		<p class="ribbon">Home</p>
		<p class="ribbon">History</p>
		<p class="ribbon">Location</p>
		<p class="ribbon">Photos</p>
		<p class="ribbon">Contact Us</p>
		<p class="newLine">This is test information</p>
		<p>This is test information</p>
	</div>
			
</body>
</html>

＆＃13;

css浮动不取消

2 个答案: