html脱离标准文档流,关于css脱离标准文档流的两种方式
所谓脱离标准文档流就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。
不浮动的盒子会无视浮动的盒子,假使现有两个盒子,一个浮动一个不浮动,则浮动的盒子会覆盖不浮动的盒子。如下代码的结果所示:
浮动
body{
margin:0px;
}
.first
{
background-color: #ccc;
float:left;
width:200px;
height:200px;
}
.second
{
background-color: blue;
width:250px;
height:250px;
}
结果如图:
盒子元素会无视浮动的元素,但是盒子元素里面的文字并不会无视浮动元素,如下图所示:
可以看到蓝色背景色盒子里的文本注意到了这个浮动元素于是在盒子里右推的形式围绕在浮动盒子的周围。
此外,一旦一个元素浮动了,那么他就可以设置宽高,可以并排,无论原来他是块级元素还是行内元素。当浮动元素里面有文字时,浮动元素不会覆盖文字,文字会围绕浮动元素显示。
关于清除浮动,为什么要清除浮动呢?举一个自己遇到的例子,代码如下:
混合布局
body{ margin:0; padding:0; font-size:10px; font-weight:bold}
div{ text-align:center; line-height:50px}
.head,.main{ width:200px;margin:0 auto;}
.head{ height:100px; background:#F90}
.left{ width:80px; height:60px; background:#ccc;float:left;}
.right{ width:120px; height:60px;background:#FCC; float:right}
.r_sub_left{ width:60px; height:60px; background:#9C3; float:left}
.r_sub_right{ width:60px; height:60px; background:#9FC; float:right;}
.footer{width:400px; height:50px; background:#9F9;margin:0 auto;}
运行后看到如下结果:
尴尬了,注意到footer的盒子飘到上面去了,只剩下文字孤零零的在下面,这是为什么呢?因为left和right均设置为浮动的状态,而main并没有设置高度,可以想象为一条线在head的下面,这样footer自然无视left和right两个浮动元素然后飘到上面去了,这是我们需要进行float清除,清除的方式有一下几种,如下:清除浮动的方法综合一下答案: 一、clear:both(/left/right); 二、overflow:hidden;width:100%;
三 、:after 四、给main设置高度:.main{width:960px; {height:600px};margin:0 auto;} 五、:margin:600px 0 0 0;
详见:http://my.oschina.net/leipeng/blog/221125 推荐使用方法一和方法二,在给footer使用overflow的时候,千万不要忘记设置它的宽度。
其中clear:both清除浮动 值描述 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。
overflow 属性规定当内容溢出元素框时发生的事情。 值描述 visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
脱离文本的第二种方式是绝对定位(position:absolute):相比于float,position:absolute不管是文本还是盒子都会直接无视掉浮动元素,将float:left换为position:absolute后可以看到如下结果:
html脱离标准文档流,关于css脱离标准文档流的两种方式相关推荐
- JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
- 分布式文档系统-document id的手动指定与自动生成两种方式解析(来自学习笔记:龙果学院ES课程)
1.手动指定document id (1)根据应用情况来说,是否满足手动指定document id的前提: 一般来说,是从某些其他的系统中,导入一些数据到es时,会采取这种方式,就是使用系统中已有数据 ...
- 15.分布式文档系统-document id的手动指定与自动生成两种方式解析
课程大纲 1.手动指定document id 2.自动生成document id ----------------------------------------------------------- ...
- 原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式 发布时间:2020-08-30 01:46:17 来源:脚本之家 阅读:148 作者:外婆的彭湖湾 下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
- 根据官网文档看Spark Streaming对接Kafka的两种方式, 以及如何实现Exactly Once语义
注: 本文算是本人的学习记录, 中间可能有些知识点并不成熟, 不能保证正确性. 只能算是对官网文档作了个翻译和解读, 随时有可能回来更新和纠错 上一篇文章讨论了Spark Streaming的WAL( ...
- 设置Word文档密码的两种方式
重要的word文档,不想随便被别人打开来看怎么办?那就给它设置一个打开密码吧. Word的设置密码有两种方式: 第一种,打开Word文档后,依次点击上面工具栏的[文件]-[信息],再点击右侧[保护文档 ...
- Word文档怎么转换为PDF格式?介绍两种方式
word应该是我们平日里接触最多的文件格式了,浏览编辑起来都很方便,但打印出来的格式却时不时就出错.这时可以将文档转成格式更稳定的PDF文件,那Word怎么转PDF呢?下面就给大家介绍两种方式,一分钟 ...
- CSS清除浮动(float)的三种方式
标题CSS清除浮动(float)的三种方式 为什么要清除浮动? 浮动的原理是让图片脱离文档流,直接浮在画面上.我们一般布局都是只设置宽度不设置高度,让内容来填充高度.但利用浮动后会让原本填充的高度消失 ...
- java 读取css文件_java文件读取的两种方式
JAVA中读取文件(二进制,字符)内容的几种方 JAVA中读取文件内容的方法有很多,比如按字节读取文件内容,按字符读取文件内容,按行读取文件内容,随机读取文件内容等方法,本文就以上方法的具体实现给出代 ...
- 早教产品微商怎么做精准引流?早教机构引流活动可以分为线上和线下两种
早教产品微商怎么做精准引流?早教机构引流活动可以分为线上和线下两种 一般来说,根据媒介的不同,早教机构引流活动可以分为线上和线下两种,线上的引流方式有:微信.自媒体.短视频;线下的引流方式有地推和异业 ...
最新文章
- nutch如何发布插件
- mysql 基于c_linux-基于MYSQL的C程序实践
- 从零开始搭建 web 聊天室(一)
- php ci hooks,CI框架 -- 核心文件 之 Hooks.php
- 电脑硬件检测_好用的电脑硬件型号有哪些_江西南昌顺同谦科技|电脑||笔记本|...
- JS实现禁止浏览器后退返回上一页
- java中的args参数
- java怎么将图片文件转流并在jsp前端显示_web前端—面试题汇总(001-005)
- 串匹配模式中的BF算法和KMP算法
- 《模拟电子技术基础》课程笔记(一)——绪论
- android 打apk文件怎么打开方式,apk文件怎么打开
- verilog 分频器设计(奇偶分频、半整数分频、任意分频、任意占空比)
- jsp文件打开为记事本怎么办
- 最易被误读的十大职业排行榜
- Unity插件精选:炫酷粒子特效(V客学院知识分享)
- 用HTML实现旋转地球,使用CSS3和贴图实现的旋转的蓝色地球
- 几MB的小软件!拯救我们的破手机!
- 小米设备跨版本降级后相机打不开陀螺仪无法工作解决办法
- uniapp入门学习
- [Unity]资源冗余排查工具