零基础学前端开发技术之第七章 浮动塌陷
Posted tea_year
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了零基础学前端开发技术之第七章 浮动塌陷相关的知识，希望对你有一定的参考价值。
知识点：
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>
2.常见布局
总结：
布局，大致的页面框架，盒子结构图。综合使用标准流、浮动。
1.左右
2.三栏
3.通栏
通栏设计
碰到白底的，先设计成其他色底部或加有色边框
技巧：
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)，我们前端设计人员看到这个额外标签的时候会发现
无内容，默认可能会删除。导致出现塌陷。这个是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>
3.2 父级元素修饰法
子不教，父之过：
父元素进行
overflow:
auto
hidden
scroll
<!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>
3.3 父级添加after伪类法
.clear:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear { 父级元素；
*zoom: 1;
/*为了兼容老式IE6 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 #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>
3.4 父级添加双伪元素法
.clearFix::after,
.clearFix::before {
content: '.';
line-height: 0;
font-size: 0;
height: 0;
display: block;
clear: both;
}
<!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>
以上是关于零基础学前端开发技术之第七章 浮动塌陷的主要内容，如果未能解决你的问题，请参考以下文章