(前端)html与css css 17、浮动的性质
浮动的性质
1、浮动的元素脱标
常见的标签都是标准流的，区分行块，如果给元素设置浮动属性，元素会脱离表准流，元素即可设置高度，又可排在一行。
未脱标：代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}div{width: 200px;height: 50px;background-color: pink;}span{width: 200px;height: 50px;background-color: skyblue;}</style>
</head>
<body><div>这是块级标签</div><span>这是行内标签</span>
</body>
</html>View Code
效果图↓
添加浮动后，脱离标准流：效果图↓
2、浮动的元素依次贴边
浮动的方向：左浮动，右浮动
多个浮动的元素在一个父盒子内，会根据书写标签的顺序依次向前贴边。
以左浮动为例：父盒子左边框内部←盒子1←盒子2←盒子3←盒子4←盒子5....... 代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 800px;height: 100px;border: 1px solid #000;}.box div{width: 100px;height: 100px;background-color: skyblue;border: 1px solid red;float: left;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>
</html>View Code
效果图↓
如果父盒子的范围不够装下所有盒子，后面多出的盒子会自动换行，去贴上一个元素的边，如果上一个盒子后面的距离还不够，再往上找。示范代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 500px;height: 500px;border: 1px solid #000;}.box div{width: 100px;height: 100px;border: 1px solid red;float: left;}.box .inner1{height: 300px;background-color: pink;}.box .inner2{width: 150px;background-color: yellow;}.box .inner3{width: 200px;height: 50px;background-color: yellowgreen;}.box .inner4{width: 200px;height: 150px;background-color: orange;}</style>
</head>
<body><div class="box"><div class="inner1">1</div><div class="inner2">2</div><div class="inner3">3</div><div class="inner4">4</div></div>
</body>
</html>View Code
图解↓
如果3的位置也不够呢？我将盒子4的宽度改为300px，效果图↓
可以看到3的位置不够用所以4又向上找了一个元素，贴到了2的位置。
这就是前面说的：如果父盒子的范围不够装下所有盒子，后面多出的盒子会自动换行，去贴上一个元素的边，如果上一个盒子后面的距离还不够，再往上找。
子盒子如果高矮不同，中间出现了缝隙，后面的盒子不会钻空↓
可以看出来1和4之前有空白，如果我再加一个5，会怎样？代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 500px;height: 500px;border: 1px solid #000;}.box div{width: 100px;height: 100px;border: 1px solid red;background-color: skyblue;float: left;}.box .inner1{height: 300px;background-color: pink;}.box .inner2{width: 150px;background-color: yellow;}.box .inner3{width: 200px;height: 50px;background-color: yellowgreen;}.box .inner4{width: 200px;height: 150px;background-color: orange;}</style>
</head>
<body><div class="box"><div class="inner1">1</div><div class="inner2">2</div><div class="inner3">3</div><div class="inner4">4</div><div class="inner5">5</div></div>
</body>
</html>View Code
效果图↓
可以见到4的右侧已经没有地方容纳5，所以5会去找3,3也没有地方，再向上找，直到1的右侧可以放下5，但是5不会不会紧贴2的下边去钻空，他会以4的底边位置为基准，然后贴1的右侧边往下排，这就是不会钻空的情况。
右浮动也一样。
3、没有margin塌陷
浮动的元素脱离标准流，标准流里margin在垂直方向上右塌陷的现象。
脱离标准流后：margin塌陷失效。
代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 300px;height: 400px;border: 1px solid #000;background-color: #ccc;}.box div{/*float: left;*/width: 100px;height: 100px;margin: 50px;background-color: pink;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div></div>
</body>
</html>View Code
效果图↓
标准文档流→ 浮动→
4、浮动元素让出标准流位置
元素在标准文档流里有自己的书写位置，一个元素加载完之后才能加载另一个元素。
元素浮动之后，他不在是标准文档流，位置会让给后面标准文档流标签里的元素。
代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 300px;height: 400px;border: 1px solid #000;background-color: #ccc;}.box .a{/*float: left;*/width: 100px;height: 100px;;background-color: pink;}.box .b{width: 200px;height: 200px;background-color: yellowgreen;}</style>
</head>
<body><div class="box"><div class="a">1</div><div class="b">2</div></div>
</body>
</html>View Code
效果图↓
标准文档流→ 给盒子1加浮动脱离标准流→
让出的效果：像一个压盖效果，但实际中并不用浮动去做压盖效果，而是用后面的就对定位去做压盖效果。
同一个父盒子里，有的元素浮动，有的不浮动会影响标准流里的显示效果，所以一个父盒子里的元素，要么一起浮动，要么就都不浮动。
5、浮动有字围效果
文字不像盒子背景部分一样，不会被浮动的元素给遮盖住，文字会绕开浮动元素进行排列。
代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.a1{float: left;width: 124px;height: 140px;;}.b{width: 500px;line-height: 28px;background-color: pink;}</style>
</head>
<body><div class="a1"><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3493079020,205977291&fm=58&bpow=550&bpoh=749" alt="" /></div><p class="b">1974年毕业于TVB艺员训练班，主演了《网中人》、《亲情》、《上海滩》等20余部剧集。1976年初涉影坛，在80年代凭《英雄本色》、《监狱风云》、《赌神》等电影成为香港“暴力美学”风格电影的代表人物之一 [1] 。90年代与成龙、周星驰并称为“双周一成”。1995年远赴好莱坞发展。主演了《安娜与国王》、《卧虎藏龙》等多部不同风格的电影， [2] 曾两次担任奥斯卡颁奖嘉宾。1999年在洛杉矶中国城“中央广场”留下手印，2000年获法国多维尔亚洲电影节特别成就奖，2004年凭《喋血双雄》等影片中塑造的枪手形象成为全美最多人收藏其DVD的男演员前三名 [3] 。2005年被香港网民评为“经典电视剧小生”第一名；2007年获美国AZN电视台 “亚洲卓越奖颁奖礼”终身成就奖</p>
</body>
</html>View Code
效果图↓
转载于:https://www.cnblogs.com/StevenSunYiwen/p/11225161.html
(前端)html与css css 17、浮动的性质相关推荐
- css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动 这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1．高度塌陷 举个例子我们看一下. 我们在 ...
- Web前端，CSS中的浮动、清除浮动
前言 持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用 早期的作用:图文环绕 现在的作用:网页布局 • 场 ...
- 【前端】HTML5+CSS3 CSS浮动（四)
文章目录 [前端]HTML5+CSS3 CSS浮动(四) 1.浮动的简介 2.浮动的特点 3.脱离文档流的特点 4.页面简单布局 5.实战小练习 [前端]HTML5+CSS3 CSS浮动(四) 1.浮 ...
- web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)
文章目录 一.什么是CSS 二.CSS的三种样式及其优先级 三.CSS基本选择器及其优先级 四.其他常见的选择器 五.选择器优先进阶 六.css的常见属性(颜色.背景.字体.边框) 七.内间距和外间距 ...
- 前端基础知识总结---CSS篇
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出! 目录 1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的? 2.CSS 选 ...
- 前端总结·基础篇·CSS
前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;} /* IE8+ */body {margin:0;} ...
- 7.（css）使用浮动布局学成网案例
文章目录 1. 页面制作重点提炼 2. 前期准备素材 3. 前期准备工作 4. CSS属性书写顺序(重点) 5. 布局流程 6. 页面制作 6.1 1) 头部制作 6.2 2)banner制作 6.3 ...
- 小蓝同学的前端之旅--HTML\CSS集成复习
小蓝同学的前端之旅--HTML\CSS集成复习 前端学习路线 复习模式 api的重要性 HTML基础总结 head标签的常用标签 body标签中常用标签 文本元素标签 表格标签 表格分组 框架 表单 ...
- 前端常见笔面--CSS
css 10. 概念 10.1 继承相关 css的继承:就是给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 官方解释,继承是一种规则,它允许样式不仅应用于特定的html标签元 ...
最新文章
- DataGrid 的 全选/取消全选 控制(CheckBox)
- Word2007怎样从随意页開始设置页码 word07页码设置毕业论文
- css hover图片hover效果兼容ie8
- sql server 语句自动补齐
- mysql.connector写了一个简单的mysql操作类：
- hihocoder 1075 : 开锁魔法III
- PHP内核探索：新垃圾回收机制说明
- 学习总结之数据挖掘三大类六分项
- python web开发-flask访问请求数据request
- 16 FI配置-财务会计-为准备激活销售会计核算的成本
- Git 本地仓库与远程仓库链接
- 打印机通讯 tspl指令_西门子PLC四种核心通讯方式汇总学习
- jQuery自己定义绑定的魔法升级版
- 【第二周】四人小组:车辆管理系统
- TWRP的使用方法/双清、三清、四清解释
- Luyten报错：This application requires a Java Runtime Environment 1.7.0 or 1.8.0
- 应用添加分享至微信、QQ和微博
- 使用Draw免费在线作图
- PMP 风险应对措施 ：规避和减轻的区别
- c语言中eof的作用,C语言中EOF是什么意思?