零基础学前端开发技术之第七章 浮动塌陷

举报
tea_year 发表于 2021/12/22 23:03:51 2021/12/22
【摘要】 知识点: 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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。