使用元素

Question

我是自学者。在HTML和CSS中，我创建了一个带有id容器的div，在那个容器中，我创建了两个div。一个用于写段落。现在我想设置父div容器的背景颜色。但是当我将容器的高度设置为auto时，颜色没有实现。 在这里我要使height = auto，因为在孩子div中，我正在写一个段落。 所以它应该是可调整的。 如何使这个正确？ 这是我的CSS代码：

#container{
  height:auto;
  background: #6b6bd4;
}

并且两个子div是main和nav：

#main{
   background-color: beige;
   width:600px;
   float:right;
   padding-right: 15px;
}

#nav{    
   background-color: beige;
   width:180px;
   float:left;
   padding-left: 9px;    
}

HTML代码：                                      

欢迎！

                    

                            许多人似乎认为提交纳税申报表是自愿的，因此将其视为不必要和繁琐。正如我们将要看到的，这对于提交报税并不是一个非常健康的观点。

                        Filing tax returns is an annual activity seen as a moral and social duty of every responsible citizen of the country. It is the basis for the government to determine the amount and means of expenditure of the citizens and provides a platform for the assesse to claim refund, among other forms of relief from time to time.


                </p>
            </div>
            <div id ="nav">
                <h3>Useful Links</h3>
                <ul>
                    <li><a href="">Tax Calculator</a></li>
                    <li><a href="">Tax Forms</a></li>
                    <li><a href="">Tax Rates</a></li>
                    <li><a href="">Help Centre</a></li>
                </ul>
            </div>

        </div>`

Answer 1

确实，花车非常棘手，恕我直言，通常使用不正确。 5年多以前，浮点数是实现布局的下一个最佳选择，其中两个块级元素可以在不使用<table>和列的情况下彼此相邻显示。

使用float的问题在于它将子元素从父容器元素中分离出来并将它们视为在它们自己的渲染上下文中。意思是，父容器突然将其高度视为内部没有内容。

今天，你有更好的选择。其中一个特别是在父容器上使用display: flex，flex-direction: row。这将保留父元素中的子元素，允许正确计算父容器的高度。

I recommend checking out flexbox

如果您担心此属性与哪些浏览器兼容，则可以获得非常好的支持。 Check out caniuse for a compatibility matrix

#container {
  display: flex;
  flex-direction: row;
  background-color: #ccc;
}

#nav, #main {
  width: 50%;
}

#nav {
  height: 100px;
  background-color: rgba(100, 220, 120, 0.5);
}

#main {
  height: 200px;
  background-color: rgba(100, 120, 220, 0.5);
}

<div id='container'>
  <div id='nav'>Nav (100px height)</div>
  <div id='main'>Main (200px height)</div>
</div>