圣杯/右div漂浮在下面答案

【问题标题】：holy grail/ right div floating under圣杯/右div漂浮在下面
【发布时间】：2015-03-23 15:51:17
【问题描述】：

我一直在试图弄清楚我的右 div 是什么浮动的。

.header{
	background:red;
	height:100px;
	width:100%;
}

.left{
	background:white;
	float:left;
	height:800px;
	width: 200px;
}

.main{
	background:yellow;
	height: 800px;
	width: 600px;
	overflow: hidden;
}

.right{
	background:white;
	float: right;
	height:800px;
	width: 200px;
	overflow: hidden;
}

.footer{
	background:red;
	height: 100px;
	width:100%;
}

<!doctype html>
<html lang="en"> 
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/> 
</head> 
<title>Layout</title> 
<body> 
    <div class="header"></div>
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
    <div class="footer"></div>
</body> 
</html>

有什么建议吗？我知道这看起来很简单，但我画了一个空白

【问题讨论】：

这样的？ jsfiddle.net/dowomentfart/0r6nhr34
如果你使用白色以外的颜色会更容易一些 - jsfiddle.net/wahh853v/2 你的主 div 也应该是浮动的......注意......因为你的宽度可能需要扩大小提琴窗户。哦...清除浮动。
啊，是的，清除浮动。谢谢1 :)
清除浮动是一回事，但是您使用的模板非常死板。看看我的答案，以获得更灵活的解决方案，该解决方案将很好地适应响应式设计原则（例如在侧边栏菜单中滑动，或仅支持较小的分辨率）。

标签： css divide

【解决方案1】：

div{
	border: 1px solid #000000;
	margin:3px;
}

.header{
    background:red;
    height:100px;
    width:100%;
}

.left{
    background:white;
    float:left;
    height:800px;
    width: 200px;
}

.main{
    background:yellow;
    height: 800px;
    width: auto;
    overflow: hidden;
}

.right{
    background:white;
    float: right;
    height:800px;
    width: 200px;
    overflow: hidden;
}

.footer{
    background:red;
    height: 100px;
    width:100%;
}

    <div class="header">header</div>
    <div style="clear:both;"></div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
    <div style="clear:both;"></div>
    <div class="footer">footer</div>

这是正确的方法：

首先放置浮动元素（左-右）而不是非浮动元素（主）

还要让你在浮动后清除 ("clear:both")

ps 我给出了主要的“with:auto”，但不是必需的……只是更兼容

    <div class="header">header</div>
    <div style="clear:both;"></div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
    <div style="clear:both;"></div>
    <div class="footer">footer</div>

【讨论】：

你不需要额外的清晰元素。还有许多其他方法可以清除浮动，这对于响应式设计来说比在其中包含硬元素要灵活得多。内容应始终按语义排序，尤其是在我们讨论整个页面的布局时。通常这意味着首先是主要内容，然后是侧边栏内容。此外，为了简洁和优化，您的 CSS 一般还有改进空间。
是的，马修。啧啧这是问题中提出的布局。清晰的 div 非常适合与旧版浏览器兼容。它解决了这个问题。
为了兼容性，完全不需要清除 div，您可以轻松地将清除样式添加到 .left 和 .footer。如果可以避免使用内联样式添加额外的 HTML 元素，则绝不是最佳做法，尤其是当您尝试完成与内容完全无关的视觉操作时。

【解决方案2】：

从语义上讲，您可能应该先处理页面的主要内容，然后才是辅助内容。此模板还会根据可用空间缩小内容区域，但如果您想要通过在 .content 元素上设置特定宽度来实现固定布局，则可以使用 CSS 轻松调整。

<div class="header"></div>
<div class="content">
    <div class="main">
        <div class="main-inner"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

然后对于 CSS，您可以使用如下内容：

.header, .footer, .content {
    clear: both;
}
.header, .footer {
    height: 100px;
}
.content {
    width: 100%;
    max-width: 1000px; /* Keeps the site from growing beyond 1000px */
    margin: 0 auto; /* Centers the content area */
}
.main, .left, .right {
    float: left;
}
.main {
    width: 100%;
}
.main-inner {
    margin: 0 200px;
}
.left, .right {
    width: 200px;
}
.left {
    margin-left: -100%; /* Puts the left sidebar to the top left of the .content element */
}
.right {
    margin-left: -200px; /* Puts the right sidebar on the right edge of the .content element */
}

/* Colors and Heights so you can see things */
.main-inner, .left, .right { min-height:600px; }
.header, .footer { background-color: red; }
.main-inner { background-color: yellow; }

http://jsfiddle.net/j1rLfmky/

【讨论】：