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

知识点：
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:autohidden 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>

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

java开发技术有什么意义,零基础学Java开发技术有哪些优势和好处？
零基础学Java开发技术有哪些优势和好处?Java开发技术有下列优势:Java编程语言简单.面向对象集中于对象及其接口.分布式处理TCP/IP协议.鲁棒性.安全性.体系结构中立性.可移植性.解释执行. ...
年过四十、零基础学前端开发，歪果仁是如何从教师转行程序员的？
也许你已经清楚了自己的兴趣之所在,但是却没有勇气开始它,或者为自己找了种种借口,按下心中的渴望.但任何时候开始自己感兴趣的东西都不算晚,本文作者过去只是一名老师,对编程怀有好奇和热爱,年过40依然毅然 ...
零基础学前端开发培训
零基础如何入门前端技术呢,前端三件套(HTML+CSS+JavaScript)想来对前端有兴趣的同学应该都知道吧,俗话说的好基础不牢地动山摇. 想要学好前端对它们的学习可不能落下,学习方法和学习环境无 ...
零基础学前端系列教程 | 和前端谈恋爱的第003天——电影海报
温馨提示:被[]包裹的是专有名词,详细介绍见下文的恋爱宝典,你可以在目录中快速找到它们,有任何问题/建议,欢迎随时微信我,我是朝阳 13908056224! 约会邀请函已经做好了,但迟迟没有发出去零 ...
零基础学ios开发培训要培训多久
零基础学ios开发培训要培训多久想参加ios开发培训,不知道ios开发培训需要多长时间能学会呢?零基础学ios培训要培训多久?学完IOS技术课程后是否可以快速找到高薪工作,一系列的问题都是菜 ...
一期完结《一篇文章让你从HTML零基础入门前端开发》12.28
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRcXH9FM-1672214813897)(./assets/%E7%8E%84%E5%AD%90Shaer-%E4% ...
零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好
温馨提示:被[]包裹的是专有名词,详细介绍见下文的恋爱宝典,你可以在目录中快速找到它们,有任何问题/建议,欢迎随时微信我,我是朝阳 13908056224! 这是姐姐传授给我的恋爱秘籍 -- 投其所好 ...
零基础的前端开发初学者应如何系统地学习？前端技能汇总 Frontend Knowledge Structure
本文转自张帅于知乎<零基础的前端开发初学者应如何系统地学习?>中的回答. 知乎原文:https://www.zhihu.com/question/19834302 GitHub项目:前 ...
我是如何零基础入门前端开发的（2021 版）
大家好,我是若川.最近组织了源码共读活动<1个月,200+人,一起读了4周源码>,已经有超50+人提交了笔记,群里已经有超1200人,感兴趣的可以点此链接扫码加我微信 ruochuan12 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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