1. 浮动 Float

定义：是元素的一种属性，设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程，可以让任何盒子在一行排列，用浮动来布局。
标准文档流：文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行，并在每行中从左至右的顺序排放元素。造成空白折叠、高矮不齐，底边对齐以及自动换行等现象。
格式：选择器 { float：属性值；}
属性值：left——元素向左浮动；right——元素向右浮动；none——元素不浮动（默认值）
特性：①脱离标准流，不占位置，只有左右浮动；②一浮动就创建一个包含块级的概念，在外边加一个父盒子，再对齐；③若上一个元素浮动则与其在顶部对齐，若上一个元素是标准流则上下排列。
块级元素：独占一行如h1~h6 p div 列表…
行内元素：不独占一行如span a img strong…
行内元素可以被包含在块级元素中，反之则不可以
display：block 显示为块元素 / inline 显示为行内元素 / inline-block 显示为块元素，但是可以内联，在一行 / none 元素不会被显示
实例演示

2. 父级边框塌陷问题

clear：清除浮动元素
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none; 无浮动元素

解决方案：
（1）增加父级元素的高度

（2）增加一个空的div标签，清除浮动

（3）在父级元素中增加一个 overflow: hidden;

（4）父类添加一个伪类：after

小结
（1）设置父元素的高度：简单，元素假设有了固定的高度，就会被限制；
（2）浮动元素后面增加空div ：简单，代码中尽量避免空；
（3）overflow：简单，下拉的一些场景避免使用；
（4）父类添加一个伪类：after（推荐）：写法稍微复杂一点，但是没有副作用。

3. 相对定位

position属性常用值：static——自动定位(默认)；relative——相对定位；absolute——绝对定位；fixed——固定定位
position: relative;
偏移属性：top——顶部偏移量；bottom——底部偏移量；left——左侧偏移量；right——右侧偏移量
相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留。
实例代码
运行结果

4. 绝对定位

position: absolute
定位：基于xxx定位，上下左右(top、bottom、left、right)
(1) 没有父级元素定位的前提下，相对于浏览器定位；
(2) 假设父级元素存在定位，我们通常会相对于父级元素进行偏移；
(3) 在父级元素范围内移动。
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留。
实例代码
运行结果

5. 固定定位

position: fixed
元素的位置相对于浏览器窗口是固定位置

6. z-index

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
z-index--------设置元素的堆叠顺序--------值:number/auto
z-index: 默认是0,最高无限制
opacity 透明度的属性值从0.0 - 1.0。值越小，使得元素更加透明。它是针对整个元素的，一旦设置了透明度，则背景色，文字颜色都有透明度。
实例代码
运行结果

前端(六)——CSS之浮动和定位相关推荐

CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) ...
【css】浮动和定位对元素的宽度-外边距或其他元素的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) ...
【前端布局篇】浮动、定位、弹性布局，固比固、双飞翼、圣杯布局
一.布局方式介绍布局模型是基于盒模型基础上进行的拓展,关于布局有流式布局(标准的布局),浮动布局.定位布局.flex布局等. HTML5+CSS3系列课程携程网首页-移动端响应式布局实战之微加建 ...
CSS的浮动与定位手把手教学
目录前言一,浮动 1.1 传统网页布局的三种方式 1.2 初步了解浮动 1.3 浮动float 1.4 浮动特性(重难点) 1.4.1 性质1: 脱标,不占位 1.4.3 性质2: 浮动元素之间的 ...
css布局-浮动、定位、flex布局
1.CSS布局 - 什么是网页的布局方式? 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 - 标准流(文档流/普通流)排版方式标准流(文档流/普通流) -标准流(文档流/ ...
[Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
HTML如何改变表格浮动位置,css控制表格样式 css布局浮动及定位
一.制作一张商品信息表,内容自定,要求用到行与列的合并实例 html> 饮料商品信息表 table caption { font-family:"宋体"; font-siz ...
web前端 (07)CSS 03+盒模型+定位
目录盒模型 (框模型) ***** 内边距 padding *** 外边距 margin *** 列表样式 * 鼠标形状 *** 定位 *****默认定位(static定位) *****如何修改默 ...
web前端，css清除浮动的常见方法
一.为什么要清除浮动当我们为盒子设置浮动样式的时候,这是盒子将会脱离标准流,这样原先布局的其他内容将会占据盒子的位置,这样就没法看见相关内容. 而在清除浮动之后,父级就会根据浮动的子盒子自动检测高度 ...

前端(六)——CSS之浮动和定位

文章目录

1. 浮动 Float

2. 父级边框塌陷问题

3. 相对定位

4. 绝对定位

5. 固定定位

6. z-index

前端(六)——CSS之浮动和定位相关推荐

最新文章

热门文章