css - 边框的浮动和父子关系的CSS问题

Question

我对 CSS 有点陌生，不明白为什么我在边框和浮动方面遇到以下问题。

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

问题 2. 父 div 的边界也被应用到子 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

还有 -->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= 作为该类元素后代的所有 divmain
• .main= 只有具有类的元素main
• div.main= 具有该类的所有 divmain
• .main > div= 作为该类元素的子元素的所有 divmain

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

.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;}