第七节 浮动

 

 

一. 浮动的性质

1. 脱标（脱离标准文档流）

　无论是块级元素还是行内元素，一旦浮动了，就脱离标准文档流（脱标）了，就可以设置宽和高了。

   下面事例是两个div，其中第一个div浮动了。

 

 1 <!DOCTYPE html>2 <html>3     <head>4         <meta charset="UTF-8">5         <title></title>6         <style type="text/css">7             *{8                 margin: 0;9                 padding: 0;
10             }
11             .box1 {
12                 width: 200px;
13                 height: 200px;
14                 background-color: red;
15                 float: left;
16             }    
17             .box2 {
18                 width: 400px;
19                 height: 400px;
20                 background-color: pink;
21             }
22         </style>
23     </head>
24     <body>
25         <div class="box1">
26         </div>
27         <div class="box2">
28         </div>
29     </body>
30 </html>

复制代码

2. 浮动的元素相互贴靠

3. 浮动的元素有字围效果

二. 清除浮动的方法

　　清除浮动的目的：让父元素有高度，而且能随着儿子的高度来自适应，并且不让下面的同级元素占了自己的位置。

      未清除浮动的案例：

 

 1 <!DOCTYPE html>2 <html>3     <head>4         <meta charset="UTF-8">5         <title></title>6         <style type="text/css">7             *{8                 margin: 0;9                 padding: 0;
10             }
11             li {
12                 width: 100px;
13                 height: 40px;
14                 background-color: pink;
15                 float: left;
16             }        
17             .box1 {
18                 width: 700px;
19                 border: 1px solid black;
20             }    
21             .box2 {
22                 width: 700px;
23                 border: 1px solid black;
24             }
25         </style>
26     </head>
27     <body>
28         <!--结果第二个div里li去贴第一个div里的li了 且第一个div没有高度-->
29         <div class="box1">
30             <ul>
31                 <li>我是小如</li>
32                 <li>我是小如</li>
33                 <li>我是小如</li>
34                 <li>我是小如</li>
35             </ul>
36         </div>
37         <div class="box2">
38             <ul>
39                 <li>我是马小如</li>
40                 <li>我是马小如</li>
41                 <li>我是马小如</li>
42                 <li>我是马小如</li>
43                 <li>我是马小如</li>
44             </ul>
45         </div>
46     </body>
47 </html>

复制代码

 

清除浮动方法一：加高法

　　给浮动的父元素加个高度，就可以关住浮动的元素了，但是实际工作中根本不可能这么用，不但麻烦，而且也不合理，该方法仅仅是为了帮助理解清除浮动的原理。

复制代码

 1 <!DOCTYPE html>2 <html>3     <head>4         <meta charset="UTF-8">5         <title></title>6         <style type="text/css">7             li {8                 width: 100px;9                 height: 40px;
10                 background-color: pink;
11                 float: left;
12             }
13             .box1{
14                 height: 50px;
15             }
16         </style>
17     </head>
18     <body>
19         <!--清除浮动方法一：给父亲加高度-->
20         <div class="box1">
21             <ul>
22                 <li>我是小如</li>
23                 <li>我是小如</li>
24                 <li>我是小如</li>
25                 <li>我是小如</li>
26                 <li>我是小如</li>
27             </ul>
28         </div>
29         <div>
30             <ul>
31                 <li>我是马小如</li>
32                 <li>我是马小如</li>
33                 <li>我是马小如</li>
34                 <li>我是马小如</li>
35                 <li>我是马小如</li>
36             </ul>
37         </div>
38     </body>
39 </html>

复制代码

清除浮动方法二：给下面的父盒子加 clear:both 

　　clear:both法，表示自己内部的元素不受其他元素影响，但该方法有个弊端，就是margin失效。

复制代码

 1 <!DOCTYPE html>2 <html>3     <head>4         <meta charset="UTF-8">5         <title></title>6         <style type="text/css">7             li {8                 width: 100px;9                 height: 40px;
10                 background-color: pink;
11                 float: left;
12             }
13             .box2{
14                 clear: both;  /*清除别人对我的影响*/
15                 margin-top: 40px;  /*此种方法 margin失效*/
16             }
17         </style>
18     </head>
19     <body>
20         <!--清除浮动方法二：clear:both-->
21         <div>
22             <ul>
23                 <li>我是小如</li>
24                 <li>我是小如</li>
25                 <li>我是小如</li>
26                 <li>我是小如</li>
27                 <li>我是小如</li>
28             </ul>
29         </div>
30         <div class="box2">
31             <ul>
32                 <li>我是马小如</li>
33                 <li>我是马小如</li>
34                 <li>我是马小如</li>
35                 <li>我是马小如</li>
36                 <li>我是马小如</li>
37             </ul>
38         </div>
39     </body>
40 </html>

复制代码

清除浮动方法三：隔墙法

    隔墙法，在两部分浮动元素之间加一堵墙，使其相互不影响，但该方法依旧有缺陷，就是父元素依旧没有高度，不能随子元素的高度来自适应。

复制代码

 1 <!DOCTYPE html>2 <html>3     <head>4         <meta charset="UTF-8">5         <title></title>6         <style type="text/css">7             * {8                 margin: 0;9                 padding: 0;
10             }    
11             li {
12                 width: 100px;
13                 height: 40px;
14                 background-color: pink;
15                 float: left;
16             }    
17             .cl {
18                 clear: both;
19             }
20             .h10{
21                 height: 10px;    
22             }
23         </style>
24     </head>
25     <body>
26         <!--清除浮动方法三：隔墙法    缺点第一个div还是没有高度，不能根据子元素的高度自动适应高度-->
27         <div>
28             <ul>
29                 <li>我是小如</li>
30                 <li>我是小如</li>
31                 <li>我是小如</li>
32                 <li>我是小如</li>
33                 <li>我是小如</li>
34             </ul>
35         </div>
36         <div class="cl h10"></div>
37         <div>
38             <ul>
39                 <li>我是马小如</li>
40                 <li>我是马小如</li>
41                 <li>我是马小如</li>
42                 <li>我是马小如</li>
43                 <li>我是马小如</li>
44             </ul>
45         </div>
46     </body>
47 </html>

复制代码

清除浮动方法四：内墙法

    内墙法，在前一部分浮动元素中加一堵墙，可以使该部分的父亲撑出高度，而且能根据子元素来自适应高度。

复制代码

 1 <!DOCTYPE html>2 <html>3 4     <head>5         <meta charset="UTF-8">6         <title></title>7         <style type="text/css">8             * {9                 margin: 0;
10                 padding: 0;
11             }        
12             li {
13                 width: 100px;
14                 height: 40px;
15                 background-color: pink;
16                 float: left;
17             }        
18             .cl {
19                 clear: both;
20             }
21             .h10{
22                 height: 10px;    
23             }
24             /*内墙法案例一*/
25             .p1{
26                 float: left;
27                 width: 50px;
28                 height: 300px;
29                 background-color: green;
30             }
31             .p2{
32                 float: left;
33                 width: 60px;
34                 height: 230px;
35                 background-color: yellow;
36             }
37             .p3{
38                 float: left;
39                 width: 60px;
40                 height: 140px;
41                 background-color: greenyellow;
42             }
43             .box1{
44                 border: 2px dashed black;
45             }
46             
47         </style>
48     </head>
49 
50     <body>
51         <!--清除浮动方法三：内墙法 本质：给没有高的父亲撑出高来-->
52         <div>
53             <ul>
54                 <li>我是小如</li>
55                 <li>我是小如</li>
56                 <li>我是小如</li>
57                 <li>我是小如</li>
58                 <li>我是小如</li>
59             </ul>
60             <div class="cl h10"></div>
61         </div>    
62         <div class="cl">
63             <ul>
64                 <li>我是马小如</li>
65                 <li>我是马小如</li>
66                 <li>我是马小如</li>
67                 <li>我是马小如</li>
68                 <li>我是马小如</li>
69             </ul>
70             <div class="cl"></div>
71         </div>    
72         <!--内墙法案例一  没有高的box1盒子撑出来高-->
73         <div class="box1">
74             <p class="p1"></p>
75             <p class="p2"></p>
76             <p class="p3"></p>
77             <div class="cl"></div>
78         </div>            
79     </body>
80 </html>

复制代码

清除浮动方法五：overflow：hidden

   该方法是overflow的一个特性,并非本意，该方法能让浮动的盒子被儿子撑出来高度，而且margin是有效的。

 

 

 1 <!DOCTYPE html>2 <html>3     <head>4         <meta charset="UTF-8">5         <title></title>6         <style type="text/css">7             * {8                 margin: 0;9                 padding: 0;
10             }    
11             li {
12                 width: 100px;
13                 height: 40px;
14                 background-color: pink;
15                 float: left;
16             }
17             .box1{
18                 overflow: hidden;
19                 margin-bottom: 5px;
20             }
21         </style>
22     </head>
23     <body>
24         <!--清除浮动方法四：overflow: hidden   这个父亲就能够被浮动的儿子撑出高度了 能让margin生效-->
25         <div class="box1">
26             <ul>
27                 <li>我是小如</li>
28                 <li>我是小如</li>
29                 <li>我是小如</li>
30                 <li>我是小如</li>
31                 <li>我是小如</li>
32             </ul>
33         </div>
34         <div>
35             <ul>
36                 <li>我是马小如</li>
37                 <li>我是马小如</li>
38                 <li>我是马小如</li>
39                 <li>我是马小如</li>
40                 <li>我是马小如</li>
41             </ul>
42         </div>
43     </body>
44 
45 </html>

复制代码

清除浮动方法六：双伪元素法（重点）

  该方法用的十分广泛，京东网站清除浮动用的就是该方法，建议把相应代码封装到基础css文件中，项目中直接引用即可。

复制代码

 1 <!DOCTYPE html>2 <html>3     <head>4         <meta charset="UTF-8">5         <title></title>6         <style type="text/css">7             * {8                 margin: 0;9                 padding: 0;
10             }        
11             li {
12                 width: 100px;
13                 height: 60px;
14                 background-color: pink;
15                 float: left;
16             }    
17             .box {
18                 border: 1px solid black;
19             }        
20             /*双伪元素法*/
21             .clearfix:before,
22             .clearfix:after {
23                 display: table;
24                 content: "";
25             }    
26             .clearfix:after {
27                 clear: both;
28             }    
29             .clearfix {
30                 zoom: 1;
31             }
32         </style>
33     </head>
34     <body>
35         <div class="box clearfix">
36             <ul>
37                 <li>我是小如</li>
38                 <li>我是小如</li>
39                 <li>我是小如</li>
40                 <li>我是小如</li>
41                 <li>我是小如</li>
42             </ul>
43         </div>
44         <div class="box clearfix">
45             <ul>
46                 <li>我是马小如</li>
47                 <li>我是马小如</li>
48                 <li>我是马小如</li>
49                 <li>我是马小如</li>
50                 <li>我是马小如</li>
51             </ul>
52         </div>    
53     </body>
54 </html>

复制代码

清除浮动方法七：伪元素法（重点）

  该方法同双伪元素法一样，用的十分广泛，小米清除浮动用的就是该方法，建议把相应代码封装到基础css文件中，项目中直接引用即可。

复制代码

 1 <!DOCTYPE html>2 <html>3     <head>4         <meta charset="UTF-8">5         <title></title>6         <style type="text/css">7             * {8                 margin: 0;9                 padding: 0;
10             }
11             li {
12                 width: 100px;
13                 height: 60px;
14                 background-color: pink;
15                 float: left;
16             }    
17             .box {
18                 border: 1px solid black;
19             }
20             /*伪元素法*/    
21             .clearfix:after {
22                 content: "";
23                 visibility: hidden;
24                 display: block;
25                 height: 0;
26                 clear: both;
27             }    
28             .clearfix {
29                 zoom: 1;
30             }
31         </style>
32     </head>
33     <body>
34         <div class="box clearfix">
35             <ul>
36                 <li>我是小如</li>
37                 <li>我是小如</li>
38                 <li>我是小如</li>
39                 <li>我是小如</li>
40                 <li>我是小如</li>
41             </ul>
42         </div>
43         <div class="box clearfix">
44             <ul>
45                 <li>我是马小如</li>
46                 <li>我是马小如</li>
47                 <li>我是马小如</li>
48                 <li>我是马小如</li>
49                 <li>我是马小如</li>
50             </ul>
51         </div>
52     </body>
53 </html>

复制代码

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

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

相关文章

html5测试 iphone6sp,5款旧iPhone测试iOS运行速度：只有6S速度明显提升

html5测试 iphone6sp,5款旧iPhone测试iOS运行速度：只有6S速度明显提升

苹果在周三凌晨推送了iOS13.3.1更新&#xff0c;这款最新系统修复了许多Bug&#xff0c;而且还新增了功能。那么升级后的流畅度表现如何呢&#xff1f;外媒就在第一时间将iPhoneSE、iPhone6S、iPhone7、iPhone8、iPhoneXR这5款旧iPhone进行了一次速度测试&#xff0c;与iOS13.3…
阅读更多...
第八节 定位

第八节 定位

一. 定位介绍 谈到定位&#xff0c;顾名思义&#xff0c;就确定元素的位置&#xff0c;定位分为三种&#xff1a;相对定位、绝对定位、固定定位&#xff1b;分别用 position&#xff1a;relative、position&#xff1a;absolute、position&#xff1a;fixed来表示&#xff0c;它…
阅读更多...
html将字符串按逗号分隔,js如何截取以逗号隔开的字符串

html将字符串按逗号分隔,js如何截取以逗号隔开的字符串

使用string对象的split()方法能够处理。正则表达式定义&#xff1a; split() 方法用于把一个字符串分割成字符串数组。数组使用方法以下&#xff1a;cdnstringObject.split(separator,howmany)对象参数描述&#xff1a;blogseparator 必需。字符串或正则表达式&#xff0c;从该…
阅读更多...
CSS块级元素与行内元素的区别和联系

CSS块级元素与行内元素的区别和联系

块元素(block element)一般是其他元素的容器元素&#xff0c;能容纳其他块元素或内联元素。块元素就好比一个四方块&#xff0c;可以放其他的四方块&#xff0c;并可以呈现在页面上任何地方。 默认情况下块元素&#xff0c;是独占一行的常见的块元素&#xff1a;div、p、h1-h6…
阅读更多...
联想台式计算机驱动程序,联想键盘驱动程序

联想台式计算机驱动程序,联想键盘驱动程序

联想键盘驱动程序官方版联想键盘驱动程序官方版是款适合联想键盘的用户打造的驱动程序。联想键盘驱动程序主要作用就是可以帮助用户解决键盘输入过程中的各种问题&#xff0c;包括联想键无法正常使用与无法被电脑识别的问题。联想键盘驱动程序还可以让用户的键盘与主机完美的兼…
阅读更多...
JS入门

JS入门

一. 总体介绍 结合近半年来前端的项目的经验&#xff0c;这里梳理一下JS常用知识&#xff0c;方便自己日后温习查找&#xff0c;同时给广大JS入门者提供一些帮助&#xff0c;文章中如有错误&#xff0c;欢迎指出。这里从JS基础、Dom操作、JS进阶、四大家族、动画、面向对象入门…
阅读更多...
联想记忆计算机网络,什么是双向联想记忆神经网络

联想记忆计算机网络,什么是双向联想记忆神经网络

联想记忆神经网络是模拟人脑, 把一些样本模式存储在神经网络的权值中, 通过大规模的并行计算, 使不完整的、受到噪声“污染”的畸变模式在网络中恢复到原有的模式本身。大脑是人体最为复杂的信息处理系统。联想记忆(AssociativeMemory, AM) 是人脑的重要认知功能之一。例如, 听…
阅读更多...
第二节 DOM-Document对象

第二节 DOM-Document对象

一. 整体介绍 这里介绍DOM对象中的Document对象。 何为Document对象&#xff1f;每个载入浏览器的HTML文档都会成为Document对象&#xff0c;Document对象可以帮助我们对所有的HTML文档进行访问。 任何一个对象都会有属性和方法&#xff0c;当然Document对象也不例外&#xff0…
阅读更多...
计算机专业的情书,【实用】大学各专业表白情书，你能看懂几个

计算机专业的情书,【实用】大学各专业表白情书，你能看懂几个

原标题&#xff1a;【实用】大学各专业表白情书&#xff0c;你能看懂几个大学各专业表白情书的正确打开方式每每看到朋友圈秀恩爱时就会用知识摆脱烦恼刷刷微博浏览网页学学专业技能......但是&#xff01;居然连专业都不放过表白还那么高调来感受感受吧……音乐专业每次看着你…
阅读更多...
第三节 DOM-Element对象

第三节 DOM-Element对象

一. 整体介绍 这里介绍DOM对象中Element对象。 那么何为Element对象呢&#xff1f;Element对象就是HTML元素&#xff0c;Element对象包括&#xff1a;元素节点、文本节点、属性节点。 下面利用一张图来总体概括一下Element对象包含的知识点。 二. 知识梳理 一张图胜似千言万语…
阅读更多...
w8计算机配置要求,win8配置要求 详细介绍

w8计算机配置要求,win8配置要求 详细介绍

随着win8系统的不断完善&#xff0c;现在已经越来越多用户投身到win8的行列之中&#xff0c;越来越多的人使用win8也代表着出现了新的问题&#xff0c;很多用户考虑到win系统对电脑的硬件要求有所不同&#xff0c;所以有些电脑无法完美的运行win8系统&#xff0c;究竟要怎么样才…
阅读更多...
C#多线程编程系列（一）- 简介

C#多线程编程系列（一）- 简介

目录 系列大纲一、前言二、目录结构四、章节结构五、相关链接系列大纲# 目前只整理到第二章&#xff0c;线程同步&#xff0c;笔者后面会慢慢更新&#xff0c;争取能把这本书中精华的知识都分享出来。C#多线程编程系列&#xff08;一&#xff09;- 简介C#多线程编程系列&…
阅读更多...
计算机论文答辩注意哪些问题,计算机专业论文答辩（准备和注意事项）

计算机论文答辩注意哪些问题,计算机专业论文答辩（准备和注意事项）

随着社会的不断发展&#xff0c;计算机的应用在中国越来越普遍&#xff0c;在互联网、通信、多媒体等领域都有应用&#xff0c;对于计算专业的同学&#xff0c;毕业时&#xff0c;除了想了解毕业论文如何写作&#xff0c;还有就是论文的答辩准备&#xff0c;下面我们就为大家重…
阅读更多...
C#多线程编程系列（二）- 线程基础

C#多线程编程系列（二）- 线程基础

目录 C#多线程编程系列&#xff08;二&#xff09;- 线程基础 1.1 简介1.2 创建线程1.3 暂停线程1.4 线程等待1.5 终止线程1.6 检测线程状态1.7 线程优先级1.8 前台线程和后台线程1.9 向线程传递参数1.10 C# Lock关键字的使用1.11 使用Monitor类锁定资源1.12 多线程中处理异常…
阅读更多...
C#多线程编程系列（三）- 线程同步

C#多线程编程系列（三）- 线程同步

目录 1.1 简介1.2 执行基本原子操作1.3 使用Mutex类1.4 使用SemaphoreSlim类1.5 使用AutoResetEvent类1.6 使用ManualResetEventSlim类1.7 使用CountDownEvent类1.8 使用Barrier类1.9 使用ReaderWriterLockSlim类1.10 使用SpinWait类参考书籍笔者水平有限&#xff0c;如果错误…
阅读更多...
C#多线程编程系列（四）- 使用线程池

C#多线程编程系列（四）- 使用线程池

目录 1.1 简介1.2 在线程池中调用委托1.3 向线程池中放入异步操作1.4 线程池与并行度1.5 实现一个取消选项1.6 在线程池中使用等待事件处理器及超时1.7 使用计时器1.8 使用BackgroundWorker组件参考书籍笔者水平有限&#xff0c;如果错误欢迎各位批评指正&#xff01;1.1 简介…
阅读更多...
C#线程模型脉络

C#线程模型脉络

今天在看同事新买到的《C#本质论 Edition 4》的时候&#xff0c;对比下以前Edtion3的新特性时&#xff0c;针对Async/Await关键字时发现对一些线程方面的定义还理解的不是很透彻&#xff0c;脉络还不是很清晰&#xff0c;这样有了本文&#xff0c;希望对有同样困惑的朋友有些帮…
阅读更多...
“菜”鸟理解.NET Framework(CLI,CLS,CTS,CLR,FCL,BCL)

“菜”鸟理解.NET Framework(CLI,CLS,CTS,CLR,FCL,BCL)

既然要学.NET&#xff0c;就要先认识认识她&#xff0c;我不喜欢大段大段文字的东西&#xff0c;自己通过理解&#xff0c;画个图&#xff0c;来看看.NET的沉鱼落雁&#xff0c;闭月羞花之容。 最下层蓝色部分是.NET Framework的基础&#xff0c;也是所有应用软件的基础。.NET …
阅读更多...
QQ炫舞手游显示进入服务器失败6,qq炫舞手游进不去怎么办 游戏进不去方法详解[多图]...

QQ炫舞手游显示进入服务器失败6,qq炫舞手游进不去怎么办 游戏进不去方法详解[多图]...

qq炫舞手游是新出的游戏&#xff0c;在近期非常的火爆&#xff0c;不过有不少的玩家都有进不了游戏的情况&#xff0c;下面安族小编给大家介绍一下游戏进不去方法详解。qq炫舞手游玩不了解决方法1.第一种方式就是内测还没有开启咯&#xff0c;所以玩家一般都是下载不到包的&…
阅读更多...
那些年我们一起追逐的多线程(Thread、ThreadPool、委托异步调用、Task/TaskFactory、Parallerl、async和await)

那些年我们一起追逐的多线程(Thread、ThreadPool、委托异步调用、Task/TaskFactory、Parallerl、async和await)

一. 背景 在刚接触开发的头几年里&#xff0c;说实话&#xff0c;根本不考虑多线程的这个问题&#xff0c;貌似那时候脑子里也有没有多线程的这个概念&#xff0c;所有的业务都是一个线程来处理&#xff0c;不考虑性能问题&#xff0c;当然也没有考虑多线程操作一条记录存在的并…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023