Question

我正在阅读和观看很多关于Floats的视频..但我还没有得到它......我有一个浮动导航器后我有一个正常的div，我把“清楚：两个”，但我我不能把它作为“边缘”给我的div，但我可以把它称为“填充”，这或多或少都像我想要的那样......但我想知道它为什么会发生......感谢你们！ / p>

*{margin:0;padding:0;box-sizing:border-box;}
body {
	background-image: url(../fondo.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
nav {
	background-color: rgba(0,0,0,.5);
	color: #fff;
	width: 1000px;
	margin: 0 auto;
}
ul {
	display: block;
	list-style-type: none;
	text-align: center;
}
.ul-main > li {
	width: 33.3%;
	float: left;
}
.ul-main li a {
	background-color: #000;
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 10px 0;
	transition: background-color .5s;
}
.ul-main li a:hover {
	background-color: #FBC02D;
}
.ul-main li ul {
	display: none;
	position: absolute;
	width: 20%;
}
.ul-main li:hover > ul {
	display: block;
}
.ul-main li ul li {
	position: relative;
}
.ul-main li ul li a {
	background-color: #FBC02D;
}
.ul-main li ul li a:hover {
	background-color: #FFEB3B;
}
.ul-main li ul li ul{
	right: -70%;
	top:0;
	width: 70%;
}
.clear {
	clear: both;
}
.wrapper {
	width: 500px;
	margin-top: 1000px;
}

<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Ejercicio de Maquetación</title>
		<meta http-equiv="refresh" content="60"/>
		<link rel="stylesheet" href="css/contacto.css"/>
		<link rel="stylesheet" href="css/header.css"/>
	</head>
	<body>
	<header>
		<nav>
			<ul class="ul-main">
				<li><a href="index.html" >Inicio</a></li>
				<li class="somos"><a href="#" >Quienes somos</a>
					<ul>
						<li><a href="#" >Historia</a></li>
						<li id="azul"><a href="#" >Proyectos</a>
							<ul>
								<li><a href="#" >Huerta para estudiantes</a></li>
								<li><a href="#" >Comedor</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="contacto.html" >Contacto</a></li>
			</ul>
		</nav>
	</header>
	<section class="wrapper clear">
		<h2>Infórmate!</h2>
	
	</section>
	</body>
</html>

Answer 1

你可以在它们之间添加一个div，它会起作用

＆＃13;

*{margin:0;padding:0;box-sizing:border-box;}
body {
	background-image: url(../fondo.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
nav {
	background-color: rgba(0,0,0,.5);
	color: #fff;
	width: 1000px;
	margin: 0 auto;
}
ul {
	display: block;
	list-style-type: none;
	text-align: center;
}
.ul-main > li {
	width: 33.3%;
	float: left;
}
.ul-main li a {
	background-color: #000;
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 10px 0;
	transition: background-color .5s;
}
.ul-main li a:hover {
	background-color: #FBC02D;
}
.ul-main li ul {
	display: none;
	position: absolute;
	width: 20%;
}
.ul-main li:hover > ul {
	display: block;
}
.ul-main li ul li {
	position: relative;
}
.ul-main li ul li a {
	background-color: #FBC02D;
}
.ul-main li ul li a:hover {
	background-color: #FFEB3B;
}
.ul-main li ul li ul{
	right: -70%;
	top:0;
	width: 70%;
}
.clear
{
  clear: both;
}
.wrapper{
	width: 500px;
	background-color: red;
  margin-top: 10px;
}

＆＃13;

<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Ejercicio de Maquetación</title>
		<meta http-equiv="refresh" content="60"/>
		<link rel="stylesheet" href="css/contacto.css"/>
		<link rel="stylesheet" href="css/header.css"/>
	</head>
	<body>
	<header>
		<nav>
			<ul class="ul-main">
				<li><a href="index.html" >Inicio</a></li>
				<li class="somos"><a href="#" >Quienes somos</a>
					<ul>
						<li><a href="#" >Historia</a></li>
						<li id="azul"><a href="#" >Proyectos</a>
							<ul>
								<li><a href="#" >Huerta para estudiantes</a></li>
								<li><a href="#" >Comedor</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="contacto.html" >Contacto</a></li>
			</ul>
		</nav>
	</header>
  
  <div class="clear"></div>
  
	<section class="wrapper">
		<h2>Infórmate!</h2>
	
	</section>
	</body>
</html>

＆＃13;

Css：浮动问题

1 个答案: