CSS与边界的浮点和父子关系问题

Question

我对CSS有些新手，不明白我为什么遇到border和float的以下问题。

问题1.如果我有.main div {float：left;}，我的左浮动将起作用，但如果我只有.main或div.main则不行？

问题2.父母div的边界也正在向孩子们施舍，不知道为什么？

 .main div {float:left; padding:10px; border: 1px solid #000;}

 <div class="main">
    <div> option1</div>
    <div> option2</div>

 </div>

Answer 1

1. 您应该考虑使用display:inline-block;代替float:left - 没有理由使用浮动imo。

2. 如果您只想在标记中选择1级，请使用：.main > div

另外 - ＆gt; Issue 1. My left float will work if I have .main div {float: left;}, but not if I have just .main or div.main?

你提到了3种不同的选择器：

• .main div =所有div，它们是具有类main
的元素的后代
• .main =仅包含类main
的元素
• div.main =所有具有班级main
的div
• .main > div =所有div，它们是具有类main
的元素的子元素

我认为您正在尝试执行以下操作之一：

.main{display:inline-block;border:1px solid #000;}
.main > div{display:inline-block;padding:10px;}

或：

.main > div{border:1px solid #000;display:inline-block;margin:0 10px;padding:10px;}