Question

我有一个带有css border-radius的圆形边框，它不会绕过我的container2 div。您可以在此jsfiddle中看到它。由于某种原因，它显示部分但在容器2上方而不是在它周围。

任何人都可以帮我解释为什么会这样做吗？

Answer 1

问题是由于属性

"float :left"

你的内部div元素。你已经为你的内部div指定了“float：left”但没有为外部div指定，所以这会破坏dom元素的正确格式，因此只为外部div分别设置border属性。从所有div css中删除“float：left”或者将它们全部添加。 <\ n>删除

border-top:4px;

来自.container2的

属性正确显示顶部边框。这是工作小提琴

http://jsfiddle.net/Ad5zy/8/

答案 1 :(得分：1)

您应该添加overflow: hidden，以便内容不会从容器中溢出。

此外，您应该删除border-top: 4px。它使顶部边框变白。

jsFiddle Demo

答案 2 :(得分：1)

   try this 
   .container2 {border: 2px solid #006699;
    border-top:4px;
    padding-bottom:4px;
    padding-top:4px;
    padding-right:4px;
    padding-left:4px;
    width: 100%;
    clear:both;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
     border-radius: 15px;
     float:left;//you miss this

答案 3 :(得分：0)

删除border-top: 4px;

的.container2

updated demo

Answer 2