零基础学前端开发技术之第七章 浮动塌陷
【摘要】
知识点： 1.浮动塌陷的概念 2.浮动塌陷的解决 1：浮动塌陷的概念
<!DOCTYPE html>
<html>
<head>
<meta charse...
知识点：
1.浮动塌陷的概念
2.浮动塌陷的解决
1：浮动塌陷的概念
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动塌陷的出现</title>
<!--第2步：设计CSS样式;div:块状元素；特征：独占1行;
float:left;含义；向左看齐；
浮动塌陷：父容器没有设置高度；子容器设置浮动，则子容器会脱离父容器
的管理。
-->
<style>
#father{border:1px solid #f00;}
div#son1{width:200px;background-color: aquamarine;float:left;}
div#son2{width:200px;background-color: blanchedalmond;float: left;}
</style>
</head>
<body><!--这是第1步，设计html网页-->
<div id="father"><!--父容器-->
<div id="son1">子容器一</div>
<div id="son2">子容器二</div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
2.常见布局
总结：
布局，大致的页面框架，盒子结构图。综合使用标准流、浮动。
1.左右
2.三栏
3.通栏
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
通栏设计
碰到白底的，先设计成其他色底部或加有色边框
- 1
技巧：
1.先标准流定父位置，浮动定子元素位置。
2.浮动影响后面的标准流，不影响前面的标准流。
3.浮动塌陷
1.原因
浮动的子元素，脱离标准文档流。
2.为什么要清除浮动
2.1 父级没高度
2.2 子盒子浮动
2.3影响布局，清除浮动
3.方法：
3.1 额外标签法
设置clear属性，下面为4个值;
-
none： 允许两边都可以有浮动对象
-
both： 不允许有浮动对象
-
left： 不允许左边有浮动对象
-
right： 不允许右边有浮动对象
一般用clear:both，空标签必须是块级元素或br
思考？
问题:
会在元素末尾，增加一个额外的标签(空div或br)，我们前端设计人员看到这个额外标签的时候会发现
- 1
无内容，默认可能会删除。导致出现塌陷。这个是W3C推荐，但是我们不推荐用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#father {
border: 1px solid #0f0;
}
img {
width: 150px;
}
#father div:nth-child(1),
#father div:nth-child(3) {
border: 1px dotted blue;
float: left;
/* height: 80px; */
}
#father div:nth-child(2) {
border: 1px solid yellow;
float: right;
height: 100px;
}
/* 设置空的div */
#father div:last-child {
/* clear: none; 相当于，我没有解决浮动塌陷 */
/* width: 100%; */
/* border: 1px solid purple; */
/* float: right; */
/* clear: left; */
/*不允许左边有浮动塌陷;*/
/* clear: right; 不允许右边有浮动塌陷 */
/* clear: both; 清除左边和右边的浮动塌陷 */
clear: both;
}
</style>
</head>
<body>
<!-- 额外标签：额外的div或br -->
<div id="father">
<div><img src="img/1.jpg" alt=""></div>
<div><img src="img/2.jpg" alt=""></div>
<div><img src="img/3.jpg" alt=""></div>
<div></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
3.2 父级元素修饰法
子不教，父之过：
父元素进行
overflow:
auto
hidden
scroll
- 1
- 2
- 3
- 4
- 5
- 6
- 7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#fu {
border: 1px solid #f00;
/* 在父元素，增加限定的修饰 */
/* auto:当子元素显示不全的时候，会出现滚动条，让下面的滚动显示. */
/* overflow: auto; */
/* hidden:只显示部分字体内容 */
/* overflow: hidden; */
/* 滚动模式:横 纵滚动条，现在只有纵向可以动； */
overflow: scroll;
}
#fu div {
width: 80px;
height: 80px;
background-color: red;
margin-left: 10px;
float: left;
}
</style>
</head>
<body>
<div id="fu">
<div>儿子1
<!-- <p>设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间
如果希望对象为可视，其父对象也必须是可视的。
对应的脚本特性为visibility。</p> -->
</div>
<div>儿子2</div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
3.3 父级添加after伪类法
.clear:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear { 父级元素；
*zoom: 1;
/*为了兼容老式IE6 7*/
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#fu {
border: 1px solid #00f;
}
#fu>div {
width: 80px;
height: 80px;
margin-left: 5px;
background-color: gray;
float: left;
}
/* 父级元素伪类法：将第一种方式，结合伪类来做了操作；
父级元素，下面有个伪类,after；表示父级元素的后面
这种方式用的比较多，可以多加练习。
*/
#fu:after {
/* content:内容 */
content: "";
/* 块显示 */
display: block;
/* 设置高度为0，就不在父级元素了,相当于类似空的标签 */
height: 0;
/* 清除浮动 */
clear: both;
/* visibility: hidden; */
visibility: hidden;
}
</style>
</head>
<body>
<div id="fu" class="clear">
<div>1</div>
<div>2</div>
</div>
<p>想到了吗？？？</p>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
3.4 父级添加双伪元素法
.clearFix::after,
.clearFix::before {
content: '.';
line-height: 0;
font-size: 0;
height: 0;
display: block;
clear: both;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#fu {
border: 1px solid #0f0f0f;
}
#fu>div {
width: 80px;
height: 80px;
margin-left: 10px;
background-color: wheat;
float: left;
}
/* 伪元素选择器+父元素，有的厂商，mi 用这个；会兼容到之前低版本的浏览器.
IE版本，上没有实现；换一种方式，来处理一下；
*/
#fu::after,
#fu::before {
content: '.';
line-height: 0;
font-size: 0;
height: 0;
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="fu">
<div></div>
<div></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/120422413
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）