黑松山资源网

CSS的position定位和float浮动详解
站长资源 2024/11/16 佚名
2 0
黑松山资源网 Design By www.paidiu.com

一、position定位

（一）：position的属性

1.absolute：生成绝对定位的元素，相对于最近一级定位不是static的父元素来进行定位；

2.relative：生成相对定位的元素，相对于其所在普通的文档流位置进行定位；

3.static:默认值，没有定位，元素出现在正常的文档流中;

4.fixed:老IE不支持，和absolute一致，相对于窗口进行定位，当出现滚动条时，不随着滚动而滚动；

5.sticky:(CSS3)有兼容性问题，它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。

（二）：关于position使用一般会引发的问题

 1.假如有一个默认100%宽度的div,一旦加上absolute绝对定位，该元素立马inline-block化，默认宽度就会自适应元素内部宽度，会导致页面的宽高塌陷。

 2.由于absolute绝对定位的灵活性，对于普通的页面布局，有时出于省事的原因很容易造成absolute/relative/top/left/z-index的滥用,这样会使后期的扩展和维护造成麻烦

（三）：position代码示例

1.relative相对定位。

CSS的position定位和float浮动详解

对象2相对于自身文档流原来位置移动，并还占据着文档流，下面的黄色块继续按照它原来的位置往下排列，relative仅仅是视觉上位置变了。

<style>
body{color: #fff;}
.aa{width: 400px;margin: 0 auto;border: 2px solid #000;height: 400px}
#position1 {height: 100px;background: green;}
#position2 {height: 100px;background: blue;position: relative;top: 10px;left: 50px;}
#position3{height: 100px;background: yellow;color: #000}
</style>
<body>
<div class="aa">
    <div id="position1">对象1</div>
    <div id="position2">对象2</div>
    <div id="position3">对象3</div>
</div>
</body>

2.absolute绝对定位

CSS的position定位和float浮动详解

对象1absolut属性相对于父级div偏移，脱离文档流，宽高塌陷，在文档流之上。

<style>
body{color: #fff;}
.aa{width: 400px;margin: 0 auto;border: 2px solid #000;height: 400px;position: relative;}
#position1 {height: 100px;background: green;position: absolute;top: 10px;left:50px; }
#position2 {height: 100px;background: blue;}
#position3{height: 100px;background: yellow;color: #000}
</style>
</head>
<body>
<div class="aa">
    <div id="position1">对象1</div>
    <div id="position2">对象2</div>
    <div id="position3">对象3</div>
</div>

二、float浮动

（一）float的定义

float 属性定义元素向左/右方向浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

float的值：left/right/none

（二）float实现文字环绕

带有浮动属性的元素也可以使元素inline-block化，具有包裹性，使得元素兼并了块元素和内联元素的的优点。带有浮动属性的元素会脱离标准流进行排列布局，脱离标准流后的浮动元素漂浮在正常块元素上面，但是依然占据正常文档流的文本空间，使得后面的文本以除了浮动元素之外的空间为排列基准，形成了文本环绕的效果。

CSS的position定位和float浮动详解

<style>
.a{width: 200px;height: 400px;margin: 0 auto;border: 1px solid #000;}
.pic{float: left;}
p{font-size: 16px;line-height: 18px;font-family: "Microsoft Yahei"}
</style>
</head>
<body>
<div class="a">
    <img src="2.jpg" width="100" width="100" class="pic">
    <p>这是一段测试文字啦啦啦啦啦这是一段测试文字啊啊啊啊啊这是一段文字显示呐呐呐呐这是一段文字显示啦啦啦啦啦</p>
</div>

（三）float浮动布局

CSS的position定位和float浮动详解

标准文档流从上到下排列。

CSS的position定位和float浮动详解

div1向左float后，很明显，高度塌陷，div2和div3和div1重叠。

（四）为什么要清除浮动以及清除浮动的几个方法

由于浮动导致元素高度塌陷产生副作用，父级盒子的边框不能被撑开，背景不能显示，父子级间的margin和padding设置值不能正确被显示。

CSS的position定位和float浮动详解

<style>
.div1{width: 400px;border: 2px solid #000;}
.div2{width: 100px;height: 100px;background: blue;float: left;}
.div3{width: 100px;height: 100px;background: green;float: right;}
</style>
</head>
<body>
<div class="div1">
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</div>

方法1：在父级结束前，添加一个子标签<div style="clear:both;"></div>

<div class="div1">
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <div style="clear:both;"></div>
</div>

方法2：在父级css属性加上入overflow:hidden;zoom:1;或者overflow:auto;zoom:1;

方法3：在父级用zoom+:after方法，原理类似于clear:both,利用CSS方式：after在元素内部加一个clear:both的元素块

.box1{zoom:1;}
.box1:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

方法4：对父级设置合适的高度直接撑开

（五）float和JavaScript　

IE浏览器：

obj.style.styleFloat = "left";

其他浏览器：

obj.style.cssFloat = "left";

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

黑松山资源网 Design By www.paidiu.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
黑松山资源网 Design By www.paidiu.com
www.paidiu.com 黑松山资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
黑松山资源网 Design By www.paidiu.com