消除子元素浮动造成父元素高度折叠的方法与三列布局的两种实现方法——9.4

Html中有一种比较容易遇到的情况，一个父元素包裹下的子元素被赋予了浮动效果结果父元素就不包裹这个子元素了，然而一般情况下父元素是依然需要去包裹子元素的，这时候就得解决这种情况。目前了解到四种方法

首先准备一个嵌套的父子元素：

<div>

    <div></div>

</div>

再加个border方便查看：

.box1 {

    width: 300px;

    border: 5px dashed red;

}

 

.box2 {

    width: inherit;

    height:300px;

    background-color: blue;

}

子元素的width:inherit属性表示继承父元素宽度；

出来的效果就是：

 

接着再给子元素一个浮动元素：

.box2 {

    float: left;

}

结果变成了：

 

可以看出来宽度还是有继承到子元素的，但是父元素并没有包裹这个子元素那么现在有四种方法可以解决这种情况：

 

方案1: 父元素设置与子元一样的高度

这种情况就是放弃让父元素被子元素撑开，直接静态写死父元素和子元素的属性这种方法的维护改动非常浪费精力

.box1 {

    height: 300px;

}

 

这种方案就是放弃让父元素被子元素撑开，直接静态写死父元素和子元素的属性这种方法的维护改动非常浪费精力，因为每次改动子元素父元素必须手动同步修改，极度不推荐。

就像这样：

.box2 {

    height: 200px;

}

 

改一个子元素要进行两次操作，效率太低了。

方案2: 父元素跟着子元素一起浮动

.box1 {

    float: left;

}

直接给父元素一个浮动元素虽然好，但是如果父元素自身也套着一个父元素那为了保证上一级的样式还不是得把上一级也加个浮动元素，这样一层层往上加浮动一点都不效率，所以并不推荐。

方案3: 添加一个块元素,专用来清浮动

在父元素里的最后加一个块元素：

<div>

    <div></div>

   <div></div>

</div>

就像这样，然后赋予这个块元素清除浮动属性：

.clear {

    clear: both;

}

这样就避免了浮动元素影响到父元素的包裹，是值得使用的。但是由于多了一个dom元素，在进行渲染或者是工作中的项目有可能会因为默认设置而出现样式冲突，所以还是分场合使用吧。

 

方案4: 父元素添加overflower,专用来清浮动

只要给父元素设置一个overflow属性就能清除浮动带来的影响，继续包裹子元素。

.box1 {

    overflow: hidden;

}

只要给父元素加一个属性就能随便子元素浮动可以说是最轻松高效又不容易出现隐藏麻烦的方式，所以最终推荐这个方案。

接下来就可以用清浮动方案来进行布局了，就来用于制作市面上最经常用到的三列布局：

首先先按照主体结构设定元素：

上中下三大块，中间主体左中右：

<div>

    <div>头部</div>

<!--    主体部分分三列布局-->

    <div>

        <div>左侧</div>

        <div>内容区</div>

        <div>右侧</div>

    </div>

    <div>底部</div>

</div>

接着赋予每一块样式属性：

/*页面容器*/

.container {

    width: 1000px;

    margin: 0 auto;

}

 

/*头部与底部共用样式*/

.header, .footer {

    height: 60px;

    background-color: lightgrey;

}

 

/*主体*/

.main {

    margin: 5px auto;

    background-color: lightblue;

}

 

 

/*主体三部分的基本样式*/

 

.left {

    width: 200px;

    /*设置最小高度,可以确保在没有内容的情况下,仍能显示出高度来*/

    min-height: 800px;

    background-color: lightgreen;

}

 

.content {

    /*内容区宽度自适应*/

    min-height: 800px;

    background-color: lightseagreen;

}

.right {

    width: 200px;

    min-height: 800px;

    background-color: lightpink;

}

出来是这样的一个效果~可以看出来所有的元素都被束缚在container 里面了：那么现在就该进行布局属性的设定了。

 

布局目前就用两种方式来实现：

方法1: 绝对定位

 

 

/*定位父级*/

 

.main {

    position: relative;

}

 

.left {

    position: absolute;

    left: 0;

    top: 0;

}

 

.right {

    position: absolute;

    right: 0;

    top: 0;

}

 

 

/*用外边距margin,挤出中间内容区*/

 

.content {

    margin-left: 210px;

    margin-right: 210px;

}

这里需要做出的定位就是把主体作为定位父级直接赋予定位属性，之后再把left和right绝对定位到main的最左和最右，而中间的content则是因为是自适应覆盖到整个主体中需要用margin属性来把可视范围挤压到中间，所以加了margin-left和margin-right。

 

这样就用绝对定位的方法完成了一个三列布局。

接下来用另一种方法来实现同样的效果：

 

方法2: 浮动定位

页面的样式不变，将布局属性全部改变成下面这样：

/*左侧左浮动*/

.left {

    float: left;

}

 

/*右侧右浮动*/

.right {

    float: right;

}

/*内容区设置*/

.content {

    float: left;

    width: 580px;

    margin-left: 10px;

}

 

/*清除子元素浮动影响*/

.main {

    overflow: hidden;

}

这就是不同于绝对定位的先定义父元素，浮动定位先是定位子元素left和right浮动元素左右定位，内容区则是直接跟在left元素后面并且必须要设定一个宽度，而且要保证三列布局的实现必须保证三个子元素的所占宽度相加不会超过父元素的1000px。最后再给父元素清除一下浮动，这样就能让父元素成功包裹子元素形成正确的上中下三大块。

 

 

这次算是了解到浮动定位与绝对定位的一些区别了，二者光是思路就完全不一样，，绝对定位就像是先准备一个框架，然后再把拼图一个个在框内摆好。而浮动定位则是先搞出来积木，积木堆好后再准备一个套子套上去。但是二者无论怎么拜访永远都不会脱离父级设定的宽度范围。