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

2025-07-27 17:43:40

零基础学前端开发技术之第七章浮动塌陷知识点： 1.浮动塌陷的概念 2.浮动塌陷的解决 1：浮动塌陷的概念代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>浮动塌陷

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

知识点： 1.浮动塌陷的概念 2.浮动塌陷的解决 1：浮动塌陷的概念

代码语言：javascript代码运行次数：0运行复制

<!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.常见布局

总结：

代码语言：javascript代码运行次数：0运行复制

布局，大致的页面框架，盒子结构图。综合使用标准流、浮动。



1.左右

2.三栏

.通栏

通栏设计

代码语言：javascript代码运行次数：0运行复制

碰到白底的，先设计成其他底部或加有边框

技巧：

1.先标准流定父位置，浮动定子元素位置。

2.浮动影响后面的标准流，不影响前面的标准流。

.浮动塌陷

1.原因

浮动的子元素，脱离标准文档流。

2.为什么要清除浮动

2.1 父级没高度

2.2 子盒子浮动

2.影响布局，清除浮动

.方法：

.1 额外标签法

设置clear属性，下面为4个值;

none：允许两边都可以有浮动对象
both：不允许有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象一般用clear:both，空标签必须是块级元素或br

思考？

问题:

代码语言：javascript代码运行次数：0运行复制

会在元素末尾，增加一个额外的标签(空div或br)，我们前端设计人员看到这个额外标签的时候会发现

无内容，默认可能会删除。导致出现塌陷。这个是WC推荐，但是我们不推荐用。

代码语言：javascript代码运行次数：0运行复制

<!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() {
            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/.jpg" alt=""></div>
        <div></div>
    </div>
</body>

</html>

.2 父级元素修饰法

子不教，父之过：

父元素进行

代码语言：javascript代码运行次数：0运行复制

overflow:

      auto

         hidden 

        scroll

代码语言：javascript代码运行次数：0运行复制

<!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>

. 父级添加after伪类法

代码语言：javascript代码运行次数：0运行复制

.clear:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clear {    父级元素；
            *zoom: 1;
            /*为了兼容老式IE6 7*/
        }

代码语言：javascript代码运行次数：0运行复制

<!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>

.4 父级添加双伪元素法

代码语言：javascript代码运行次数：0运行复制

.clearFix::after,
        .clearFix::before {
            content: '.';
            line-height: 0;
            font-size: 0;
            height: 0;
            display: block;
            clear: both;
        }

代码语言：javascript代码运行次数：0运行复制

<!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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2022-01-19，如有侵权请联系 cloudcommunity@tencent 删除布局对象基础设计容器

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1247132.html

本站网友小强爬行记	19分钟前发表
不影响前面的标准流
本站网友雅贝氏	18分钟前发表
200px;background-color
本站网友安达亜美	13分钟前发表
initial-scale=1.0"> <title>Document</title> <style> #fu { border
本站网友青岛到威海	7分钟前发表
blanchedalmond;float
本站网友博客申请	16分钟前发表
block; clear
本站网友怎样创建网站	7分钟前发表
先设计成其他底部或加有边框技巧：1.先标准流定父位置
本站网友牵引治疗	2分钟前发表
分享自作者个人站点/博客

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