CSS3定位和浮动的介绍
这篇文章主要为大家详细介绍了CSS3定位和浮动的概念，以及实例代码讲解CSS3定位和浮动的使用方法，感兴趣的小伙伴们可以参考一下
本文为大家分享CSS3定位和浮动的基础概念，与使用方法，供大家参考，具体内容如下
一、定位
1、 css定位：
改变元素在页面上的位置
2、 css定位机制：
普通流：
浮动：
绝对布局：
3、 css定位的属性:
position 把元素放在一个静态的，相对的，绝对的，或者固定的位置中
top/left/right/botom 元素向上/左/右/下的偏移量
overflow 设置元素溢出其区域发生的事情
clip 设置元素显示的形状
vertical-align 设置元素显示的对其方式
z-index 设置元素的堆叠顺序/用来设置元素的堆叠顺序，越大越在上方/
position的属性
static 静态的（默认）
relative 相对布局（默认的）
absolute 绝对布局 （和其他的标签无关联）
fixed 固定的（不会随着页面的滚动而动）
实例代码：
<body>
<p id="position1"></p>
<p id="position2"></p>
<script>
for (var i=0;i<100;i++){
document.write(i+"<br/>")
}
</script>
</body>
#position1{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
left: 20px;
top: 20px;
/*用来设置元素的堆叠顺序，越大越在上方*/
z-index: 2;
}#position2{
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 30px;
top: 10px;
z-index: 1;
}二、浮动
float属性可用的值:
left/right/none/inherit: 向左、右，不浮动，从父级继承。
* float
1.浮动后，脱离正常流，在浮动流中排列。任何元素都是作为块元素来显示，可设置宽高，内容撑开宽度。
2.很多浮动块在一起的时候，他们总是找与自己最近的、浮动方向相同的块来确定自己的位置，如果被迫换行，则以这个最近的元素的高度为基准起新行
clear属性： 去掉浮动属性（包括继承来的）
意思和上面对应的一样
需要清浮动的情况：
子标签浮动后，父标签的高度无法被撑开，所以需要清浮动；
新加入的标签，希望不受之前浮动元素的影响，则需要清浮动；
1.clear:both; height:0; overflow:hidden;
2.overflow:hidden; 触发layout 常用于清楚内浮动；
3.after 伪对象：给当前对象设置
.aa:after {content:”.”}
.aa {display:inline-block;}
.aa {display:block;}
想办法 触发ie6的layout渲染机制，靠运气解决了很多bug，zoom：1可以触发！！！
inline-block对内块 对外行；
4.父标签一起浮动；
5.position:absolute；清除浮动
display
display：block 以块元素显示；
display：none 内容消失，不占空间；
display：inline 以行内元素显示，可解决IE6的双倍BUG；
display：inline-block 对内块，对外行。
visibility：none
隐藏，但是依旧占用空间，影响布局
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
以上是CSS3定位和浮动的介绍的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何在uniapp中使用地图和定位功能
Oct 16, 2023 am 08:01 AM
如何在uniapp中使用地图和定位功能一、背景介绍随着移动应用的普及和定位技术的迅猛发展，地图和定位功能已经成为了现代移动应用中不可缺少的一部分。uniapp是一种基于Vue.js开发的跨平台应用开发框架，可以方便开发者在多个平台上共用代码。本文将介绍如何在uniapp中使用地图和定位功能，并提供具体的代码示例。二、使用uniapp-amap组件实现地图功能
如何使用WordPress插件实现即时定位功能
Sep 05, 2023 pm 04:51 PM
如何使用WordPress插件实现即时定位功能随着移动设备的普及，越来越多的网站开始提供基于地理位置的服务。在WordPress网站中，我们可以通过使用插件来实现即时定位功能，为访问者提供与地理位置相关的服务。一、选择适合的插件在WordPress插件库中有很多提供地理位置服务的插件可供选择。根据需求和要求，选择适合的插件是实现即时定位功能的关键。以下是几个
苹果无线耳机丢了怎么定位_苹果无线耳机定位方法
Mar 23, 2024 am 08:21 AM
1、首先，我们打开手机上的【查找】App，在设备界面的列表中选择设备。2、然后，可以查看位置，还可以点击路线导航过去。
HTML、CSS和jQuery：制作一个带有浮动效果的按钮
Oct 24, 2023 pm 12:09 PM
HTML、CSS和jQuery：制作一个带有浮动效果的按钮，需要具体代码示例引言：如今，网页设计已成为一种艺术形式，通过使用HTML、CSS和JavaScript等技术，我们能够为页面增加各种各样的特效和交互效果。本文将简要介绍如何用HTML、CSS和jQuery制作一个带有浮动效果的按钮，并提供具体的代码示例。一、HTML结构首先，我们需要在HTML文件中
css3怎么实现花边边框
Sep 16, 2022 pm 07:11 PM
在css中，可以利用border-image属性来实现花边边框。border-image属性可以使用图片来创建边框，即给边框加上背景图片，只需要将背景图片指定为花边样式即可；语法“border-image: url(图片路径) 向内偏移值 图像边界宽度 outset 是否重复;”。
解决Go语言开发中的内存泄漏定位问题的方法
Jul 01, 2023 pm 12:33 PM
解决Go语言开发中的内存泄漏定位问题的方法内存泄漏是程序开发中常见的问题之一。在Go语言开发中，由于其自动垃圾回收机制的存在，内存泄漏问题相对其他语言来说可能较少。然而，当我们面对大型复杂的应用程序时，仍然可能会出现内存泄漏的情况。本文将介绍一些在Go语言开发中定位和解决内存泄漏问题的常用方法。首先，我们需要了解什么是内存泄漏。简单来说，内存泄漏指的是程序中
高德地图怎么定位对方手机位置_高德地图定位对方手机位置方法
Apr 01, 2024 pm 02:11 PM
1、点击进入自己手机的高德地图软件。2、再点击右下角的我的。3、点击进入家人地图。4、点击创建我的家人地图。5、创建成功后，会出现邀请码，分享给另外一台手机。
iPhone 输入'发现石油”触发定位？隐私还能保证吗？
Apr 26, 2024 pm 01:28 PM
近日，发现网上有很多用户表示使用苹果手机搜索或者评论“发现石油”相关话题时，设备会自动开启定位，疑似苹果手机是在收集、发送位置信息，监控用户。iPhone输入“发现石油”会触发定位？这样苹果的隐私还能保证吗？很显然，这是一个误会！苹果客服称，定位功能默认是开启的，任何操作都可能触发更新状态，而不是仅限于发送特定的文字。但这种说法也不尽然全面，一般情况下iPhone很少会触发定位功能，除非你在搜索东西，或者APP机制设定有关，用户在输入某些字符时，APP就会自动在后台启用定位功能。这一话题之所以能
