HTML div被

Question

我正在尝试使用部分布局页面，但遇到了一些问题。我的代码如下......

https://jsfiddle.net/ytv4zp4b/

<section>
    <div class="width">
        Test Content
                <div class="sharing">
            <div class="sharingsocial">
                Social Links
            </div>
            <div class="sharingprint">
                Print Link
            </div>
        </div>
    </div>
</section>
<section>
    Footer
</section>

section{background-color:grey;}
.width{background-color:red;max-width:500px;margin:auto;}
.sharing{max-width:500px;margin:auto;}
.sharingsocial{float:left;background:green;}
.sharingprint{float:right;background:yellow;}

我无法理解为什么.sharing div被页脚部分覆盖，我哪里出错？

Answer 1

在关闭.sharing div之前添加以下div。

代码：

<div style="clear:both;"> </div>

https://jsfiddle.net/ytv4zp4b/2/

Answer 2

只需将float:left替换为display:inline-block .sharingsocial它就可以了！ 这里更新了Fiddle

Answer 3

您可以在overflow: hidden上使用.sharing来触发新的新的格式设置上下文

https://jsfiddle.net/ytv4zp4b/3/

注意：此方法会剪切您的内容，以防您想要越过.sharing容器边界。

Answer 4

问题

CSS float属性导致所有后续元素也浮动。有关浮动的更多信息，请参阅here。

解决方案

您必须设置.width:after { content: ''; display: block; clear: both; } 以阻止其他元素浮动。

您可以通过在CSS中添加以下内容来完成此操作：

section{
  background-color: grey;
}

.width{
  background-color:red;
  max-width:500px;
  margin:auto;
  }
  
.width:after {
    content: '';
    display: block;
    clear: both;
}

.sharing{
  max-width:500px;
  margin:auto;
}

.sharingsocial{
  float:left;
  background:green;
}
.sharingprint{
  float:right;
  background:yellow;
}

演示

＆＃13;

＆＃13;

<section>
    <div class="width">
        Test Content
	<div class="sharing">
            <div class="sharingsocial">
                Social Links
            </div>
            <div class="sharingprint">
                Print Link
            </div>
        </div>
    </div>
</section>
<section>
    Footer
</section>

＆＃13;

Caused by: java.lang.ClassNotFoundException: Could not load requested class : Employee

＆＃13;

＆＃13;

＆＃13;