css的浮动和定位

一、脱离标准文档流

就是文档的“默认”状态,就是标签占用文档的位置。
标准文档流中,标签分为两种:块级元素、行内元素。
块级元素:
一定是霸占一行的,能设置宽、高,不设置宽度默认就是占满父亲。div、p、h、li
行内元素:
和其他行内元素并排,不能设置宽、高,默认宽度就是文字宽度。span、a、b、i、u
标准流做不出网页:因为能并排的不能改宽高。所以,要脱离标准流。

1、浮动

行级元素转换成块级元素
一旦一个元素浮动了,就可以设置宽高,无论是行标签,还是块标签 。
因为浮动之后,脱离标准流了,所以标准流里面的法律、规则都不适用了。

float:left;
或者
float:right;

(1)浮动宏观的看,就是做“并排”的,所有的元素都可以浮动
(2)具有float属性的元素在父标签中是不占空间的
(3)float能解决标签之间有间隙的问题
(4)浮动是css里面布局用的最多的属性

.box1{
	float: left;
	width: 300px;
	height: 400px;
	background-color: yellowgreen;
}
.box2{
	float: left;
	width: 400px;
	height: 400px;
	background-color: skyblue;
}

在这里插入图片描述

.box1{
	width:50px;
	height:50px;
	background: red;
	float:left;
			
}
.box2{
	width:100px;
	height:100px;
	background: green;
}

在这里插入图片描述
(5)浮动的元素有“字围”效果

<div>
	<img src="images/1.jpg" alt="" />
</div>
<p>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>

让div浮动,p不浮动;
div挡住了p,但是p中的文字不会被挡住,形成“字围”效果。

2、清除浮动

clear:none | left | right | both

none:允许浮动元素出现在两侧
left: 左侧不允许有浮动元素
right: 右侧不允许有浮动元素
both: 不允许有浮动

<div class=“clear”></div>
.clear{clear:both;}

兼容性:
下面这种清除浮动的方法在ie6下,div空标签会有默认高度。
解决方法:

.clear{
	clear:both;

//IE   
	overflow:hidden;
	height:0;
}

二、overflow

1、超出部分隐藏

overflow:visible | hidden | auto | scroll
visible:显示超出内容,不剪切内容也不添加滚动条,默认
hidden:超出内容隐藏
auto:默认属性,在需要时剪切内容并添加滚动条
scroll:总是显示滚动条
还可针对x轴和y轴设置
overflow-x:
overflow-y:

2、清楚浮动
如果一个父标签内所有的子集都浮动,给父元素设置overflow:hidden属性,则可以清除子元素的浮动。

<div class=“out”>
	<div class=“div1”></div>
	<div class=“div2”></div>
</div>
.out{
	overflow: hidden;
}
.div1{
	width:100px;
	height:100px;
	border:1px solid red;
	float:left;
}
.div2{
	width:100px;
	height:100px;
	border:1px solid blue;
	float:left;
}

三、visibility

可视可见
visibility :visible | hidden | inherit
visible: 元素是可视的
hidden:元素不可视的(仍占其本来的空间)
inherit:继承父元素的可视性

visibility:hidden与display:none的区别:
visibility:hidden----隐藏后还占用空间流
display:none—不占用空间流

四、定位

定位有三种,分别是相对定位、绝对定位、固定定位
相对定位:
position:relative;
绝对定位:
position:absolute;
固定定位:
position:fixed;
1、相对定位
相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整

position:relative;   → 必须先声明,自己要相对定位了,
left:100px;       → 然后进行调整。
top:150px;       → 然后进行调整。

在这里插入图片描述

div{
	width: 200px;
	height: 200px;
}
.box1{
	background-color: yellowgreen;
}
.box2{
	background-color: skyblue;
 	position: relative;
 	top: 100px;
 	left: 400px;
}
.box3{
	background-color: orange;
}

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

在这里插入图片描述
相对定位的定位值
可以用left、right来描述盒子右、左的移动;
可以用top、bottom来描述盒子的下、上的移动。
相对定位默认参考点是页面的左上角
2、绝对定位
在这里插入图片描述
绝对定位脱标
绝对定位的盒子,是脱离标准文档流的。所以,所有的标准文档流的性质,绝对定位之后都不遵守了。
绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block;就可以设置宽、高了:

span{
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: pink;
}

绝对定位的盒子居中
绝对定位之后,所有标准流的规则,都不适用了。
所以margin:0 auto;失效。

div{
width: 400px;
height: 60px;
background-color: green;

position: absolute;
left: 50%;
margin-left:-200px;
} 

1---left:50%;
2---(大盒子-小盒子)/2
	(430-250)/2=90; 流出两边的空余位置
3---430/2-90 ;   
margin-left:-125px;让定位再想左移动

3、固定定位
就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变

p{
width: 100px;
	height: 100px;
background-color: orange;


	position: fixed;
top: 100px;
	left: 100px;
}

<p></p>
<img src="images/2.jpg" alt="" />

用途:
导航栏固定
返回顶部

<think>好的,我现在需要处理用户关于CSS浮动定位排版实验的心得体验的问题。用户已经提供了之前的对话历史一些引用资料,我需要结合这些信息来生成一个符合要求的回答。首先,我要回顾用户的问题,确保理解他们的需求。用户当前的请求是希望分享或获取关于CSS浮动定位排版实验的学习心得或经验。他们特别提到了“css浮动定位排版实验心得体验”,并提供了四个相关的引用资料。此外,用户还引用了之前的回答,其中包含了HTML表单应用实验的心得总结相关问题。需要确保新回答能够结合这些引用,同时遵循用户给出的系统级指令,比如正确使用LaTeX格式、添加引用标识等。首先,我需要整理用户提供的引用内容:引用[1]讨论了浮动的基本概念分类,提到了float属性的使用。引用[2]涉及CSS定位机制,特别是百分比定位的计算方法。 引用[3][4]都关于清除浮动的方法影响,包括父元素高度问题清除浮动的技术如额外标签法。接下来,我需要将这些引用内容整合到回答中,形成结构清晰的心得总结。根据用户之前的示例,回答通常分为几个部分,每个部分有子标题、代码示例相关问题。同时,需要自然地添加引用标识,例如在讨论浮动时引用[1],在定位部分引用[2],在清除浮动时引用[3][4]。 用户可能希望了解浮动定位的基本原理、实际应用中的问题及解决方法,以及实验中的经验总结。因此,回答的结构可以包括基础概念、应用技巧、常见问题与解决、高级应用等部分。每个部分需要结合引用资料中的信息,并给出具体的代码示例,如浮动布局的实现、定位属性的使用、清除浮动的方法等。 另外,用户提到需要生成相关问题,这些问题应围绕CSS浮动定位展开,可能涉及清除浮动的其他方法、定位属性的区别、响应式布局中的浮动应用等。这些问题需要与回答内容紧密相关,帮助读者进一步深入学习。 需要注意系统级指令中的LaTeX格式要求,但考虑到CSS主题中可能较少涉及数学公式,需要检查是否有必要添加。当前问题可能不涉及数学表达式,但需保持警惕,确保任何公式的正确格式。最后,要确保回答使用中文,结构清晰,帮助用户逐步理解问题,并保证信息的准确性可靠性。需要参考用户提供的引用资料,避免引入外部信息,确保回答基于用户提供的引用内容。</think>### CSS浮动定位与排版实验心得总结 通过实验学习,我深入理解了CSS浮动定位的布局机制及其对页面排版的影响,以下是具体心得总结: --- #### 一、浮动布局的核心原理 1. **浮动特性与文档流脱离** ```css .box { float: left; width: 200px; } ``` - 浮动元素会脱离标准文档流,向左/右移动直到碰到包含框边缘[^1] - 相邻浮动元素自动排列,形成多列布局(如商品列表)[^1] - **实验现象**:未清除浮动时,父容器高度塌陷(子元素不撑开父容器)[^3] 2. **清除浮动的关键方法** - **额外标签法**:在浮动元素后添加空标签并设置`clear: both`[^4] - **伪元素清除法**(推荐方案): ```css .clearfix::after { content: ""; display: block; clear: both; } ``` --- #### 二、定位机制的精确定义 1. **定位类型对比** | 定位类型 | 参照物 | 特点 | |---|---|---| | `static` | 文档流 | 默认定位方式 | | `relative` | 自身原位置 | 保持原空间占用 | | `absolute` | 最近非static父元素 | 脱离文档流[^2] | | `fixed` | 浏览器窗口 | 不随滚动条移动 | 2. **百分比定位的计算逻辑** - `left: 50%`的定位基于父容器宽度计算[^2] - 绝对定位元素设置`left: 50%` + `margin-left: -100px`可实现水平居中 --- #### 三、实验中的典型问题与解决 1. **浮动元素覆盖问题** - **现象**:浮动元素遮挡下方内容 - **解决**:为被遮挡元素添加`clearfix`类或设置`overflow: auto`[^3] 2. **绝对定位层级冲突** ```css .modal { position: fixed; z-index: 1000; /* 控制层叠顺序 */ top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` --- #### 四、排版技巧进阶 1. **混合布局实现** ```css .container { display: grid; grid-template-columns: 1fr 300px; } .sidebar { position: sticky; top: 20px; /* 粘性定位实现固定侧边栏 */ } ``` 2. **响应式浮动适配** ```css @media (max-width: 768px) { .float-item { float: none; width: 100%; } } ``` --- #### 五、总结与优化方向 1. **性能优化** - 减少`position: absolute`的滥用,避免重绘开销 - 使用`will-change: transform`提升动画性能 2. **现代布局替代方案** - 优先考虑Flexbox/Grid布局替代传统浮动布局 - 粘性定位(`position: sticky`)替代JS实现的吸顶效果[^2] ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值