浮动没有覆盖填充

Question

我正在做一个网站，有3个不同的span，通过使用float:left参数彼此相邻。但是，这弄乱了padding我在包装中包含了这两个元素。 如何让它们彼此相邻而不干扰填充？

Example

.wrapper { 
 
    width: 100%; 
 
    padding: 10px 0; 
 
    background: red; 
 
} 
 

 
.box-A { 
 
    width: 49%; 
 
    float: left; 
 
} 
 

 
.box-A { 
 
    width: 49%; 
 
}

<h1>Not working but aligned</h1> 
 
<div class="wrapper"> 
 
    <div class="box-A"> 
 
    Lorem 
 
    </div> 
 
    <div class="box-A"> 
 
    Ipsum 
 
    <br> Ipsum 
 
    <br> Ipsum 
 
    <br> Ipsum 
 
    <br> 
 
    </div> 
 
</div> 
 

 
<h1>Working, but not aligned</h1> 
 
<div class="wrapper"> 
 
    <div class="box-B"> 
 
    Lorem 
 
    <br> Lorem 
 
    <Br> 
 
    </div> 
 
    <div class="box-B"> 
 
    Ipsum 
 
    <br> Ipsum 
 
    <br> 
 
    </div> 
 
</div>

Answer 1

有两种解决方案，以修复该问题。

1. 使用display:inline-block代替float:left和remove the spaces which is occured byinline-block
2. 添加clearfix为包装

Answer 2

<h1>Not working but aligned</h1> 
<div class="wrapper"> 
    <div class="box-A"> 
    Lorem 
    </div> 
    <div class="box-A"> 
    Ipsum<br> 
    Ipsum<br> 
    Ipsum<br> 
    Ipsum<br> 
    </div> 
</div> 
<style> 
.wrapper { 
    width: 100%; 
    padding: 10px 0; 
    background: red; 
    display: inline-block; 
} 
.box-A { 
    width: 49%; 
    float: left; 
} 

.box-A { 
    width: 49%; 
} 
</style> 

Answer 3

上wrapper

.wrapper { 
    width: 100%; 
    padding: 10px 0; 
    background: red; 
    display: inline-block; 
    overflow: hidden;/*Add This Property*/ 
} 

Answer 4

制作添加overflow:hidden以下改变你的CSS，我希望这应该是工作。

.wrapper { 
    width: 100%; 
    padding: 10px 0; 
    background: red; 
} 
.box-A { 
    width: 49%; 
    float: left; 
} 

.box-A { 
    width: 49%; 
} 

.wrapper:after { 
    content:""; 
    clear:both; 
    display:block; 
}