div容器产品不包括其他divs谁是子女
问题描述：
具体而言，这是一个HTML和CSS问题。div容器产品不包括其他divs谁是子女
/* Pocetak #container-product */
#container-product{
\t padding:0 10px;
}
.kategorije{
\t margin-bottom:10px;
\t padding:0;
}
.kategorije h2{
\t text-align:center;
\t text-decoration:underline;
\t font-style:italic;
}
/* Pocetak #sidemenu */
h3{
\t margin:0;
\t padding:0;
\t font-size:17px;
\t font-weight:bold;
}
#sidemenu{
\t float:left;
\t width:240px;
}
#sidemenu-kategorije{
\t margin:0;
\t padding:0;
\t font-size:15px;
\t font-weight:bold;
}
#sidemenu-kategorije ul{
\t margin:0;
\t padding:0;
\t list-style:none;
}
#sidemenu-kategorije li{
\t margin:0;
\t padding-bottom:10px;
}
#sidemenu-kategorije li a{
\t text-decoration:none;
\t color:#0A13B8;
}
#sidemenu-kategorije li a:hover{
\t font-size:20px;
\t text-decoration:underline;
\t color:#000000;
}
/* Kraj #sidemenu */
/* Pocetak #content */
#content{
\t float:right;
\t width:690px;
\t padding:0;
}
.product1, .product2, .product3{
\t float:left;
\t width:165px;
\t margin:0;
\t padding:0 5px;
}
.product4{
\t float:right;
\t width:165px;
\t margin:0;
}
.product-img{
\t float:left;
\t display:block;
\t text-align:center;
\t overflow:hidden;
}
.product-grupa{
\t /*border:1px solid;*/
\t padding:0 10px;
\t text-align:center
}
.product-grupa a{
\t text-decoration:none; \t
\t color:#0A13B8;
}
.product-grupa a:hover{
\t text-decoration:underline;
\t color:#000000;
}
.clear{
\t clear: both;
\t width: 100%;
\t height: 15px;
\t overflow: hidden;
}
/* Kraj #content */
/* Kraj #container-product */<div id="container-product"> <!-- Pocetak #container-product -->
\t <div class="kategorije">
\t <h2>KATEGORIJE PROIZVODA</h2>
</div>
\t \t
\t <div id="sidemenu"><!-- Pocetak #sidemenu -->
\t <div id="sidemenu-kategorije">
\t <ul>
\t <li><a href="#"><h3>RASVETA</h3></a></li>
<li><a href="#"><h3>LED RASVETA</h3></a></li>
<li><a href="#"><h3>KANALICE</h3></a></li>
<li><a href="#"><h3>OSIGURACI</h3></a></li>
<li><a href="#"><h3>MERNI INSTRUMENTI</h3></a></li>
<li><a href="#"><h3>GALANTERIJA</h3></a></li>
<li><a href="#"><h3>KLEME</h3></a></li>
<li><a href="#"><h3>DELOVI ZA VEŠ MAŠINE</h3></a></li>
<li><a href="#"><h3>DELOVI ZA BOJLERE</h3></a></li>
<li><a href="#"><h3>VENTILATORI</h3></a></li>
</ul>
</div>
\t </div><!-- Kraj #sidemenu -->
\t \t
\t <div id="content"><!-- Pocetak #content -->
\t \t
\t \t \t <div class="product1"><!-- Pocetak .product1 -->
\t \t \t \t <a class="product-img" href="#">
\t <img src="#" width="165" height="165"/>
</a>
<h3 class="product-grupa"><a href="#">RASVETA</a></h3> \t \t
\t </div><!-- Kraj .product1 -->
\t \t <div class="product2"><!-- Pocetak .product2 -->
\t \t \t \t <a class="product-img" href="#">
\t \t <img src="#" width="165" height="165"/>
\t </a>
\t <h3 class="product-grupa"><a href="#">LED RASVETA</a></h3> \t \t
\t \t </div><!-- Kraj .product2 -->
\t \t <div class="product3"><!-- Pocetak .product3 -->
\t \t \t \t <a class="product-img" href="#">
\t \t <img src="#" width="165" height="165"/>
\t </a>
\t \t <h3 class="product-grupa"><a href="#">KANALICE</a></h3> \t \t
\t </div><!-- Kraj .product3 -->
\t
\t <div class="product4"><!-- Pocetak .product4 -->
\t \t \t \t <a class="product-img" href="#">
\t \t <img src="#" width="165" height="165"/>
\t </a>
\t \t <h3 class="product-grupa"><a href="#">OSIGURAČI</a></h3> \t \t
\t </div><!-- Kraj .product4 -->
\t <div class="clear"></div>
\t \t <div class="product1"><!-- Pocetak .product1 -->
\t \t \t \t <a class="product-img" href="#">
\t \t <img src="#" width="165" height="165"/>
\t \t \t </a>
\t <h3 class="product-grupa"><a href="#">MERNI INSTRUMENTI</a></h3>
\t </div><!-- Kraj .product1 -->
\t <div class="product2"><!-- Pocetak .product2 -->
\t \t \t \t <a class="product-img" href="#">
\t \t <img src="#" width="165" height="165"/>
\t </a>
<h3 class="product-grupa"><a href="#">GALANTERIJA</a></h3> \t \t
\t </div><!-- Kraj .product2 -->
\t <div class="product3"><!-- Pocetak .product3 -->
\t \t \t \t <a class="product-img" href="#">
\t \t <img src="#" width="165" height="165"/>
\t </a>
\t <h3 class="product-grupa"><a href="#">KLEME</a></h3> \t \t
\t </div><!-- Kraj .product3 -->
\t <div class="product4"><!-- Pocetak .product4 -->
\t \t \t \t <a class="product-img" href="#">
\t \t <img src="#" width="165" height="165"/>
\t </a>
\t <h3 class="product-grupa"><a href="#">DELOVI ZA VEŠ MAŠINE</a></h3>
\t </div><!-- Kraj .product4 -->
\t <div class="clear"></div>
<div class="product1"><!-- Pocetak .product1 -->
\t \t \t \t <a class="product-img" href="#">
\t <img src="#" width="165" height="165"/>
</a>
<h3 class="product-grupa"><a href="#">DELOVI ZA BOJLERE</a></h3> \t
\t </div><!-- Kraj .product1 -->
\t \t <div class="product2"><!-- Pocetak .product2 -->
\t \t \t \t <a class="product-img" href="#">
\t \t <img src="#" width="165" height="165"/>
\t </a>
\t <h3 class="product-grupa"><a href="#">VENTILATORI</a></h3> \t \t
\t \t </div><!-- Kraj .product2 -->
<div class="clear"></div>
</div><!-- Kraj #content -->
</div> <!-- Kraj #container-product -->我有一个问题，这个div container-product不包含的孩子，我会附上图片有问题的。 问题是，我犯了一个错误？
答
，因为你正在使用float需要清除的元素，在这种情况下，父亲。
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* Pocetak #container-product */
#container-product {
padding: 0 10px;
}
.kategorije {
margin-bottom: 10px;
padding: 0;
}
.kategorije h2 {
text-align: center;
text-decoration: underline;
font-style: italic;
}
/* Pocetak #sidemenu */
h3 {
margin: 0;
padding: 0;
font-size: 17px;
font-weight: bold;
}
#sidemenu {
float: left;
width: 240px;
}
#sidemenu-kategorije {
margin: 0;
padding: 0;
font-size: 15px;
font-weight: bold;
}
#sidemenu-kategorije ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidemenu-kategorije li {
margin: 0;
padding-bottom: 10px;
}
#sidemenu-kategorije li a {
text-decoration: none;
color: #0A13B8;
}
#sidemenu-kategorije li a:hover {
font-size: 20px;
text-decoration: underline;
color: #000000;
}
/* Kraj #sidemenu */
/* Pocetak #content */
#content {
float: right;
width: 690px;
padding: 0;
}
.product1,
.product2,
.product3 {
float: left;
width: 165px;
margin: 0;
padding: 0 5px;
}
.product4 {
float: right;
width: 165px;
margin: 0;
}
.product-img {
float: left;
display: block;
text-align: center;
overflow: hidden;
}
.product-grupa {
/*border:1px solid;*/
padding: 0 10px;
text-align: center
}
.product-grupa a {
text-decoration: none;
color: #0A13B8;
}
.product-grupa a:hover {
text-decoration: underline;
color: #000000;
}
.clear {
clear: both;
width: 100%;
height: 15px;
overflow: hidden;
}
/* Kraj #content */
/* Kraj #container-product */<div id="container-product" class="clearfix">
<!-- Pocetak #container-product -->
<div class="kategorije">
<h2>KATEGORIJE PROIZVODA</h2>
</div>
<div id="sidemenu">
<!-- Pocetak #sidemenu -->
<div id="sidemenu-kategorije">
<ul>
<li><a href="#"><h3>RASVETA</h3></a>
</li>
<li><a href="#"><h3>LED RASVETA</h3></a>
</li>
<li><a href="#"><h3>KANALICE</h3></a>
</li>
<li><a href="#"><h3>OSIGURACI</h3></a>
</li>
<li><a href="#"><h3>MERNI INSTRUMENTI</h3></a>
</li>
<li><a href="#"><h3>GALANTERIJA</h3></a>
</li>
<li><a href="#"><h3>KLEME</h3></a>
</li>
<li><a href="#"><h3>DELOVI ZA VEŠ MAŠINE</h3></a>
</li>
<li><a href="#"><h3>DELOVI ZA BOJLERE</h3></a>
</li>
<li><a href="#"><h3>VENTILATORI</h3></a>
</li>
</ul>
</div>
</div>
<!-- Kraj #sidemenu -->
<div id="content">
<!-- Pocetak #content -->
<div class="product1">
<!-- Pocetak .product1 -->
<a class="product-img" href="#">
<img src="#" width="165" height="165" />
</a>
<h3 class="product-grupa"><a href="#">RASVETA</a></h3>
</div>
<!-- Kraj .product1 -->
<div class="product2">
<!-- Pocetak .product2 -->
<a class="product-img" href="#">
<img src="#" width="165" height="165" />
</a>
<h3 class="product-grupa"><a href="#">LED RASVETA</a></h3>
</div>
<!-- Kraj .product2 -->
<div class="product3">
<!-- Pocetak .product3 -->
<a class="product-img" href="#">
<img src="#" width="165" height="165" />
</a>
<h3 class="product-grupa"><a href="#">KANALICE</a></h3>
</div>
<!-- Kraj .product3 -->
<div class="product4">
<!-- Pocetak .product4 -->
<a class="product-img" href="#">
<img src="#" width="165" height="165" />
</a>
<h3 class="product-grupa"><a href="#">OSIGURAČI</a></h3>
</div>
<!-- Kraj .product4 -->
<div class="clear"></div>
<div class="product1">
<!-- Pocetak .product1 -->
<a class="product-img" href="#">
<img src="#" width="165" height="165" />
</a>
<h3 class="product-grupa"><a href="#">MERNI INSTRUMENTI</a></h3>
</div>
<!-- Kraj .product1 -->
<div class="product2">
<!-- Pocetak .product2 -->
<a class="product-img" href="#">
<img src="#" width="165" height="165" />
</a>
<h3 class="product-grupa"><a href="#">GALANTERIJA</a></h3>
</div>
<!-- Kraj .product2 -->
<div class="product3">
<!-- Pocetak .product3 -->
<a class="product-img" href="#">
<img src="#" width="165" height="165" />
</a>
<h3 class="product-grupa"><a href="#">KLEME</a></h3>
</div>
<!-- Kraj .product3 -->
<div class="product4">
<!-- Pocetak .product4 -->
<a class="product-img" href="#">
<img src="#" width="165" height="165" />
</a>
<h3 class="product-grupa"><a href="#">DELOVI ZA VEŠ MAŠINE</a></h3>
</div>
<!-- Kraj .product4 -->
<div class="clear"></div>
<div class="product1">
<!-- Pocetak .product1 -->
<a class="product-img" href="#">
<img src="#" width="165" height="165" />
</a>
<h3 class="product-grupa"><a href="#">DELOVI ZA BOJLERE</a></h3>
</div>
<!-- Kraj .product1 -->
<div class="product2">
<!-- Pocetak .product2 -->
<a class="product-img" href="#">
<img src="#" width="165" height="165" />
</a>
<h3 class="product-grupa"><a href="#">VENTILATORI</a></h3>
</div>
<!-- Kraj .product2 -->
<div class="clear"></div>
</div>
<!-- Kraj #content -->
</div>
<!-- Kraj #container-product -->