DIV+CSS 浮动布局完美解决方案

DIV+CSS浮动布局是网页设计中常用的一种布局方式，可以用CSS中的float属性来将元素浮动到其父元素的左侧或右侧，从而实现多栏布局。但是，浮动布局也存在一些问题，例如：元素高度无法自适应，容易出现浮动元素脱离文档流等问题。下面是一份完整的攻略，帮助您解决浮动布局的问题。

一、清除浮动的方法

在进行浮动布局时，经常会出现子元素的高度无法和父元素高度相等的问题，这是因为子元素浮动后不会对父元素高度产生影响，因此需要将浮动元素的影响“清除掉”。以下是一些常用的清除浮动的方法：

1.1 父元素增加clearfix样式

在父元素中增加clearfix样式，可以清除子元素的浮动，使子元素高度自适应。

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

<div class="parent clearfix">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

1.2 使用空div清除浮动

在浮动元素的后面插入一个空的div，并对其设置clear:both，可以清除浮动元素的影响。

.clear {
    clear: both;
}

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="clear"></div>
</div>

1.3 使用overflow:hidden清除浮动

在父元素中设置overflow:hidden，可以使子元素高度自适应，从而清除浮动元素的影响。

.parent {
    overflow: hidden;
}

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

二、双飞翼布局

双飞翼布局是一种常用的三栏布局方式，它可以使中间的主体内容先渲染，避免了传统左右两栏布局在DOM树中先出现的列高度较大时，导致加载时间延长和页面闪烁的问题。

2.1 HTML结构

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

2.2 CSS样式

.container {
    position: relative;
    padding-left: 200px;
    padding-right: 200px;
}
.container .main {
    height: 200px;
    margin: 0 220px;
    background-color: #ccc;
}
.container .left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    margin-left: -100%;
    background-color: #aaa;
}
.container .right {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 200px;
    margin-right: -100%;
    background-color: #aaa;
}

这里解释一下样式中的margin-left: -100%，margin-right: -100%，这是为了修正左右两栏的位置。当左边的元素使用float:left浮动后，它占据位置可能会影响到后面中间元素的渲染。通过使用margin-left:-100%修正位置，让左边元素与父元素左侧重合，后面中间元素继续按照正常布局排列即可。

三、圣杯布局

圣杯布局也是一种常用的三栏布局方式，它可以在保持中间主体内容在DOM树上先渲染以提高加载速度的同时，还可以保证主体内容优先显示在源代码中。以下是一份圣杯布局的示例代码：

3.1 HTML结构

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

3.2 CSS样式

.container {
    position: relative;
    padding: 0 200px;
}
.container .main {
    float: left;
    width: 100%;
    margin: 0 -200px;
    height: 200px;
    background-color: #ccc;
}
.container .left {
    float: left;
    width: 200px;
    margin-left: -100%;
    position: relative;
    left: -200px;
    height: 200px;
    background-color: #aaa;
}
.container .right {
    float: left;
    width: 200px;
    margin-left: -200px;
    position: relative;
    right: -200px;
    height: 200px;
    background-color: #aaa;
}

这里解释一下样式中的margin-left: -100%和margin-left: -200%，同样是为了修正左右两栏的位置。当左边的元素使用float:left浮动后，它占据位置可能会影响到后面中间元素的渲染。通过使用margin-left:-100%和margin-left:-200%修正位置，让左、右边元素与父元素左、右侧重合，后面中间元素继续按照正常布局排列即可。

以上是关于DIV+CSS浮动布局的完整攻略，清除浮动的方法，双飞翼布局、圣杯布局的详细说明，希望对您有所帮助。