2021-06-04

最新推荐文章于 2022-04-23 14:32:27 发布

你来晚了一步

最新推荐文章于 2022-04-23 14:32:27 发布

阅读量54

点赞数

本文链接：https://blog.csdn.net/IDACW/article/details/117571877

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的浮动(float)和定位(position)。浮动元素脱离文档流，可用于水平布局，影响周围元素位置；相对定位保留原有位置并可偏移，绝对定位则完全脱离文档流，依据指定祖先元素定位。定位包括static、relative、absolute和fixed四种类型，提供了更高级的布局方案。

摘要由CSDN通过智能技术生成

一、浮动
浮动：float 用于元素水平方向的布局
none:默认值，不开启浮动
right:
left:
浮动元素的特点：
1.浮动元素会脱离文档流，不会占用文档流中的位置
文档流把css分为很多层，是网页的基础层，若不设置一些特殊属性，

2.元素浮动之后，浮动元素下的块元素会自动上移
3.浮动元素只能向左或向右移动
4.浮动不会超过父元素的边界
5.浮动元素不会超过其相邻的浮动元素
6.浮动元素上面有块元素，浮动元素不会上移
7.浮动元素不会覆盖文字，用于文字环绕图片

二、定位（position）,一种更高级、更灵活的布局手段
   static:静止定位，表示不开启定位
   relative:相对定位
       特点：当元素开启相对定位后，若不设置偏移量，不会有任何变化
           开启相对定位的元素，参照元素自身在文档流的位置偏移
           偏移量：元素与上下左右的距离
               top:上偏移量
               bottom:下偏移量
                   这两个值决定了垂直方向的位置
               left:左偏移量
               right:右偏移量
                   这两个值决定了水平方向的位置
   absolute:绝对定位
       特点：当元素设置绝对定位后，不设置偏移量，元素不会有变化
           当元素设置绝对定位后，元素会脱离文档流，不占用文档流的位置
           如果当前元素没有祖先元素，参照与根元素<html>进行定位
           如果当前元素有祖先元素，参照与最近的开启定位的祖先元素进行定位
   fixed:固定定位