博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浮动的清除 -- 四种方法
阅读量:5877 次
发布时间:2019-06-19

本文共 1996 字,大约阅读时间需要 6 分钟。

浮动的清除 -- 四种方法

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

开胃小菜

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

762322-20160830234955511-1226224697.png

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

762322-20160830235019605-832821046.png

第二个div中的li,去贴第一个div中最后一个li的边了。

原因就是因为div没有高度,不能给自己浮动的孩子们,一个容器。

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

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

762322-20160830235119355-1920493857.png

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

762322-20160830235204965-775005643.png

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

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

762322-20160830235235918-364419606.png

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

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

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

762322-20160830235310527-312995208.png

762322-20160830235336918-496508321.png

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

762322-20160830235413480-348710102.png

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

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

762322-20160830235442183-451901267.png

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

762322-20160830235507668-730719184.png

清除浮动的最后总结

  • 1) 加高法:
    浮动的元素,只能被有高度的盒子关住。 也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适应页面的快速变化。
1   
→ 设置height2

3

4

5
67
→ 设置height8

9

10

11
  • 2) clear:both;法
    最简单的清除浮动的方法,就是给盒子增加clear:both;表示自己的内部元素,不受其他盒子的影响。
1   
2

3

4

5
67
→ clear:both;8

9

10

11

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

  • 3)隔墙法:
    在两部分浮动元素中间,建一个墙。隔开两部分浮动,让后面的浮动元素,不去追前面的浮动元素。
    墙用自己的身体当做了间隙。
1   
2

3

4

5
67
89
10

11

12

13

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

  • 内墙法:
1   
2

3

4

5
6
78
9

10

11

12

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

  • 4)overflow:hidden;

这个属性的本意,就是将所有溢出盒子的内容,隐藏掉。但是,我们发现这个东西能够用于浮动的清除。

我们知道,一个父亲,不能被自己浮动的儿子撑出高度,但是,如果这个父亲加上了overflow:hidden;那么这个父亲就能够被浮动的儿子撑出高度了。这个现象,不能解释,就是浏览器的小偏方。
并且,overflow:hidden;能够让margin生效。

转载于:https://www.cnblogs.com/gchlcc/p/5824200.html

你可能感兴趣的文章
【HDOJ 5379】 Mahjong tree
查看>>
iOS UITableView表视图滚动隐藏UINavigationController导航栏
查看>>
SDL如何嵌入到QT中?!
查看>>
$(document).ready()
查看>>
RunLoop总结:RunLoop的应用场景(四)
查看>>
8个很实用的在线工具来提高你的Web设计和开发能力
查看>>
P1026 统计单词个数
查看>>
AndroidStudio EventBus报错解决方法its super classes have no public methods with the @Subscribe...
查看>>
MySQL主从同步那点事儿
查看>>
Python RGB 和HSV颜色相互转换
查看>>
mybatis分页练手
查看>>
.net数据库连接字符串加密
查看>>
[js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
查看>>
文件监控
查看>>
poi excel 常用api
查看>>
AD提高动态的方法(附SNR计算)
查看>>
在linux程序里面,知道一个函数地址,改函数是属于某个动态库的,怎么样得到这个动态库的全【转】...
查看>>
sklearn 中的交叉验证
查看>>
C#语言中的属性语法还可以改进
查看>>
利用 spring bean 的属性 init-method 解决因为数据库连接没有初始化而导致首次点击页面超慢的问题...
查看>>