浮动的清除 -- 四种方法

From: https://www.cnblogs.com/gchlcc/p/5824200.html

前言 -- 一个父亲不能被自己浮动的儿子,撑出高度。

开胃小菜

  • 来看一个实验:现在有两个div,div身上没有任何属性。每个div中都有li,这些li都是浮动的。

我们本以为这些li,会分为两排,但是,第二组中的第1个li,去贴靠第一组中的最后一个li了。

第二个div中的li,去贴第一个div中最后一个li的边了。
原因就是因为div没有高度,不能给自己浮动的孩子们,一个容器。

清除浮动方法1:给浮动的元素的祖先元素加上高度

  • 如果一个元素要浮动,那么它的祖先元素一定要有高度.高度的盒子,才能关住浮动

只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素.所以就是清除浮动带来的影响了.

清除浮动的方法2:clear:both;

  • 网页制作中,高度height很少出现.为什么?因为能被内容撑高!那么也就是说,刚才我们讲解的方法1,工作中用的极少.

  • clear:both; clear就是清除,both指的是左浮动,右浮动都要清除.意思就是:清除别人对我的影响.
    这个方法有一个非常大的,并且致命的问题,margin失效了!

清除浮动方法3:隔墙法与内墙法

  • 隔墙法 该方法通过div.cl h16这堵墙将两个父类分隔,弥补了clear:both方法中margin无效的情况,可以通过设置墙的高度来控制间隙 弊端:网页渲染后,两个分隔的父类不会有高度

  • 内墙法 顾名思义,将墙修在了父类里面

清除浮动方法4:overflow:hidden;

  • overflow:hidden;的本意是将超出父类的部分隐藏

一个父亲不能被自己浮动的儿子,撑出高度。但是,只要给父亲加上overflow:hidden; 那么,父亲就能被儿子撑出高了。这是一个偏方

清除浮动的最后总结

  • 1) 加高法:
    浮动的元素,只能被有高度的盒子关住。 也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适应页面的快速变化。
1   <div>   → 设置height
2       <p></p>
3       <p></p>
4       <p></p>
5   </div>
6
7   <div>   → 设置height
8       <p></p>
9       <p></p>
10      <p></p>
11  </div>
  • 2) clear:both;法
    最简单的清除浮动的方法,就是给盒子增加clear:both;表示自己的内部元素,不受其他盒子的影响。
1   <div>
2       <p></p>
3       <p></p>
4       <p></p>
5   </div>
6
7   <div>   → clear:both;
8       <p></p>
9       <p></p>
10      <p></p>
11  </div>

浮动确实被清除了,不会互相影响了。但是有一个问题,就是margin失效。两个div之间,没有任何的间隙了。

  • 3)隔墙法:
    在两部分浮动元素中间,建一个墙。隔开两部分浮动,让后面的浮动元素,不去追前面的浮动元素。
    墙用自己的身体当做了间隙。
1   <div>
2       <p></p>
3       <p></p>
4       <p></p>
5   </div>
6
7   <div class="cl h10"></div>
8
9   <div>
10      <p></p>
11      <p></p>
12      <p></p>
13  </div>

我们发现,隔墙法好用,但是第一个div,还是没有高度。如果我们现在想让第一个div,自动的根据自己的儿子,撑出高度,我们就要想一些“小伎俩”,“奇淫技巧”。

  • 内墙法:
1   <div>
2       <p></p>
3       <p></p>
4       <p></p>
5       <div class="cl h10"></div>
6   </div>
7
8   <div>
9       <p></p>
10      <p></p>
11      <p></p>
12  </div>

内墙法的优点就是,不仅仅能够让后部分的p不去追前部分的p了,并且能把第一个div撑出高度。这样,这个div的背景、边框就能够根据p的高度来撑开了。

  • 4)overflow:hidden;

这个属性的本意,就是将所有溢出盒子的内容,隐藏掉。但是,我们发现这个东西能够用于浮动的清除。
我们知道,一个父亲,不能被自己浮动的儿子撑出高度,但是,如果这个父亲加上了overflow:hidden;那么这个父亲就能够被浮动的儿子撑出高度了。这个现象,不能解释,就是浏览器的小偏方。
并且,overflow:hidden;能够让margin生效。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402847.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue引入本地图片不显示;vue引入本地图片;

data () {return {imgUrl: require(/static/平安团意险.jpg), // 动态引入图片}},

目录索引

〇、接口、泛型、委托、事件 1.泛型和协变逆变2.委托和事件3.c#基础4.c#4.0协变逆变的理解一、linq等数据处理 1.数据查询2.数组3.linq 总结二、并行程序 1.并行性能简单分析三、编码技巧 1.考虑用类型代替参数检查2.c#没有指针导致的性能问题研究一二3.匿名函数递归4.代码设计…

equals和=,==的区别

一. 和equals的区别 1. 是运算符 2. equals是String对象的方法 一般有两种类型的比较 1. 基本数据类型的比较 2. 引用对象的比较 1. 基本数据类型的比较 和equals都比较的是值是否相等&#xff0c;相等则为true&#xff0c;否则为false 2. 引用对象的比较 和equals都是比较是栈…

eq相等,smarty 比较操作符!时间戳

2019独角兽企业重金招聘Python工程师标准>>> eq相等&#xff0c; ne、neq不相等&#xff0c; gt大于&#xff0c; lt小于&#xff0c; gte、ge大于等于&#xff0c; lte、le 小于等于&#xff0c; not非&#xff0c; mod求模。 is [not] div by是否能被某数整除&am…

阅读笔记四

学以致用 战国末期的思想家荀子曾经说过&#xff1a;“知之而不行&#xff0c;虽敦必困”。看到这句话&#xff0c;我想大家都知道它的意思&#xff0c;懂得许多道理却不付诸实践&#xff0c;虽然知识很丰厚&#xff0c;也必将遇到困厄。 没错&#xff0c;在这半个多月当中&…

推荐!!!【大杂烩】url、file、blob、base64互相转换

url地址或file文件获取base64 base64转blob blob或file转url&#xff1a; 使用URL.createObjectURL()方法读取出url js读取图片不同信息流

html页面通过特殊链接:打电话,发短信,发邮件详细教程

From: http://www.cnblogs.com/liuhongfeng/p/4976599.html 采用url href链接的方式&#xff0c;实现在Safari ios&#xff0c;Android 浏览器&#xff0c;webos浏览器&#xff0c;塞班浏览器&#xff0c;IE&#xff0c;Operamini等主流浏览器&#xff0c;进行拨打电话功能。…

Photoshop切图学习

前端开发中&#xff0c;之前都是Designer给我们切好图&#xff0c;给出readline&#xff0c;所以我们前端工程师基本不自己动手切图&#xff0c;现在换了新的公司&#xff0c;需要我们自己手动切一些图。Designer制作好的psd的图片如下&#xff1a; 自己想达到以下要求&#xf…

【vant】van-list的滚动加载onload事件

1.van-list的滚动加载onload事件&#xff1a;onload莫名执行多次或者一直加载到所有数据。 2.官方说了&#xff0c;不能使用float和overflow。包括父级元素和html和body都不要用这些触发BFC的属性 3.滑动到底部会触发该事件&#xff08;一定要注意父级标签&#xff0c;甚至 htm…

C#操作XmlDocument对象 报缺少根节点 一一道来

C# 操作XmlDocument文档 1.第一步选择文件目录string FileNamestring.Empty;SaveFileDialog sfdnew SaveFileDialog();if(sfd.ShowDialog() DialogResult.OK){ FileName sfd.FileName; }FileStream fs;//判断文件是否存在if(!File.Exists(FileName)){ fs File.Create(…

微信小程序开发demo-地图定位

要求要完成的功能&#xff1a; 1.要完成的要点是城市定位。 2.就是切换城市。 首页我们先参照微信小程序开放的官方文档找到&#xff1a; 在这里我们可以找到”当前位置经纬度“ getLocation: function (){var that this wx.getLocation({success: function (res) {console.lo…

移动端H5下载后端文件

首先是手机H5移动端上&#xff0c;针对能直接打开的文件例如pdf等&#xff0c;下载是直接打开预览了。如果要真正保存到手机里&#xff0c;需要点击右上角三个点去那里面选择保存。对于非预览文件会直接下载。 而在有些浏览器里&#xff0c;是可以直接下载出文件的。感觉这个与…

[CSS] 眼下最流行的五大CSS框架,你都知道么?

From: http://developer.51cto.com/art/201710/555733.htm 如今&#xff0c;CSS框架越来越受欢迎&#xff0c;可以说已经应用到每一个网站上了。作为开发工具&#xff0c;CSS框架一直处于不断进化和改进的状态&#xff0c;因此我们强烈建议您关注眼下的趋势。这篇文章会带您了…

centos5.8上安装git server

Git 可以使用四种主要的协议来传输数据&#xff1a;SSH 协议&#xff0c;Git 协议和 HTTP 协议。下面将一一介绍如何在服务端和客户端搭建和使用git的这些协议。 基础环境&#xff1a; git server:172.16.29.24 centos5.8 git client:172.16.29.25 centos5.8 首先需要在两在机…

实验五——循环结构学习总结

1.本次课学习到的知识点&#xff1a; &#xff08;1&#xff09;循环结构四要素&#xff1a;循环初始化&#xff0c;循环条件&#xff0c;循环体&#xff0c;循环变量修改 &#xff08;2&#xff09;循环语句包括&#xff1a;while语句、do-while语句、for语句、break语句 cont…

前端复制字符串到excel生成表格

场景需求&#xff1a;前端页面有个按钮&#xff0c;点击时候会复制一段文本&#xff0c;然后将复制的文本直接copy黏贴到excel表格里&#xff0c;就会自动形成对应的表格数据。 以下代码可以直接复制使用&#xff08;有效的点赞支持一波&#xff09;&#xff1a; copyAll () {…

[QUICK UI] 有哪些目前流行的前端框架

From: https://blog.csdn.net/qianduankuangjia/article/details/78185047 使用前端框架其实和开发的项目有一定的关系&#xff0c;因为在不同的项目中可能会用到不同的组件功能&#xff0c;这样说可能有一点片面&#xff0c;但是在面临几十种再做出选择的时候确实有一定的难度…

XP设置文件夹默认打开方式改为“资源管理器”

为什么80%的码农都做不了架构师&#xff1f;>>> 在“资源管理器”中单击“工具→文件夹选项→文件类型”&#xff0c;在“已注册的文件类型”下的列表框中找到一个名为“资料夹”的选项&#xff08;按文件类型排序的话它会排在最后面几个&#xff09;&#xff0c;选…

2018年五大最佳前端框架比较,程序员会怎么选?

From: https://blog.csdn.net/qq_41852103/article/details/79619250 现在有大量的CSS前端框架可用。但真正好的屈指可数。本文将比较五个最佳前端框架&#xff0c;每个框架都有自己的长处和短处&#xff0c;以及特定的应用领域&#xff0c;使你可以根据特定项目的需求进行选择…

解决ant design vue中的modal弹框样式修改无效问题 修改modal样式无效

ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的 原因在于弹框modal被挂载在最大的元素div外面了 所以需要将挂载在某个html元素上 在modal外面主动套一个div 在修改样式即可:getContainer"()>$refs.ref"