简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 演示如何消除子元素浮动造成的父元素高度折叠与三列布局的实现2019-09-04
Blogger Information
Blog 23
fans 0
comment 0
visits 19671
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
演示如何消除子元素浮动造成的父元素高度折叠与三列布局的实现2019-09-04
风吹的博客
Original
721 people have browsed it

在写作业之前，先交代一下相关概念的理解。

不管是浮动还是绝对定位都是为了使html元素脱离文档流，从而达到控制元素布局的手段。元素一旦脱离文档流，就将此元素认作是块（想象是一个方块）。

文档流：html元素在浏览器中按一定顺序的排放。（从左到右，从上到下，先显示写在前面的元素，再展示后面的元素）

浮动只能控制元素在水平方向上的移动，在垂直方向上看，仍在文档流中、浮动一个元素，不会对此元素之前的元素产生影响，影响的是浮动元素之后的元素。简单理解就是，后面未浮动元素会占据已浮动元素之前的位置。

浮动：｛flow：right或者left；｝

  1. 演示子元素浮动对父级元素高度折叠的影响

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="style6.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>

css代码：

.box1{width: 200px;border: 5px dashed lightcoral;}
.box2{width: inherit; height: 300px; background: aqua;}

此时未设置浮动，效果如下：

未浮动.png

子元素刚好被父级元素给包裹

当设置浮动后：

css代码：

.box1{width: 200px;border: 5px dashed lightcoral;}
.box2{width: inherit; height: 300px; background: aqua;}
/*设置浮动*/
.box2{float: left;}

浮动.png

我们此时发现1.父级元素再也包裹不住子元素了，有些边框线没了。2.观察画圈部分发现子元素此时是压着父元素的，换句话说，此时浮动了的子元素，翅膀硬了，不仅不听父级元素话了，还站在了父级元素脸上。我们将这种不好的行为在此称作是：子元素浮动造成父级元素高度折叠（坍塌）。父级元素为了教化子元素，需要一段代码，来清除这种现象，就是 float: left

清除的css代码：

.box1{width: 200px;border: 5px dashed lightcoral;}
.box2{width: inherit; height: 300px; background: aqua;}
/*设置浮动*/
.box2{float: left;}
/*清除浮动*/
.box1{overflow: hidden;}

效果图：

清除浮动.png

注意：此刻子元素依旧浮动，只是没有造成父元素高度折叠。（翅膀依旧硬，但是没有站在脸上了）

接下来先来了解定位。定位分为四种：静态定位，相对定位，绝对定位，固定定位。

即将用到的绝对定位（absolute），不仅使元素脱离了文档流，还使元素可以在水平，垂直上进行移动。（浮动只能水平移动）

绝对定位使用前，必须确定一个参照物，对元素的移动都是参照 参照物的位置进行的。默认为body，可以设置父级元素进行参考。

2.演示三列布局的两种方法（绝对定位和浮动）

绝对定位：

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="style7.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="header">头部</div>
    <div class="main">
        <div class="left">左侧</div>
        <div class="content">内容</div>
        <div class="right">右侧</div>
        </div>
    <div class="footer">底部</div>
</div>
</body>
</html>

css代码

/*对每个块进行修饰*/
.container{width:1000px;margin:0 auto}
.header,.footer{height: 60px;background-color: aqua;}
.main{background: lightcoral;margin: 5px auto;}
.left{width: 200px;min-height:800px;background-color:cornflowerblue;}
.content{min-height: 800px;background-color: red;}
.right{width: 200px; min-height: 800px;background-color: chocolate;}
/*绝对定位的信息*/
.main{position: relative;}
.left{position: absolute;left: 0;top: 0;}
.right{position: absolute;right: 0;top: 0;}
.content{margin-left: 200px;margin-right: 200px;}

效果图：

三列布局之绝对定位.png

特别说明：我们只对left和right进行了绝对定位，内容区域的出现是因为设置了，margin-left和margin-right。

浮动：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="style7.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="header">头部</div>
    <div class="main">
        <div class="left">左侧</div>
        <div class="content">内容</div>
        <div class="right">右侧</div>
    </div>
    <div class="footer">底部</div>
</div>
</body>
</html>

css：

/*对每个块进行修饰*/
.container{width:1000px;margin:0 auto}
.header,.footer{height: 60px;background-color: aqua;}
.main{background: lightcoral;margin: 5px auto;overflow: hidden;}
.left{width: 200px;min-height:800px;background-color:cornflowerblue;}
.content{min-height: 800px;background-color: red;}
.right{width: 200px; min-height: 800px;background-color: chocolate;}
/*浮动的信息*/
.left{float:left;}
.right{float:right;}
.content{float: left;width:600px;}

进行了浮动，记得要清除浮动对其他元素的影响、

浮动效果图.png


Correction status：qualified

Teacher's comments：对于清除浮动的方式, 学会一种, 了解多种, 防止 看不懂别人的代码
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！