对于CSS浮动float和定位position的解析-css教程-PHP中文网

首页

web前端

css教程

对于CSS浮动float和定位position的解析

不言

Jun 25, 2018 pm 03:48 PM

css 定位浮动

本文针对CSS浮动float、定位position进行学习理解，通过实例帮助大家掌握CSS浮动float、定位position技巧，感兴趣的小伙伴们可以参考一下

一 . 浮动float

I . 定义及规则

float默认为none,对应标准流的情况。当float : left;时，元素就会向其父元素的左侧靠紧，脱离标准流，同时宽度不再伸展至充满父容器，而是根据自身内容来确定。

II . 演示规则

准备代码

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title></title>  
    <style>  
        body   
        {   
            margin: 0;   
            padding: 0;   
        }   
  
        #father   
        {   
            background-color: cyan;   
  
            /*父级p 没有定位 造成子p的margin-top传递给父级*/   
            position: absolute;   
        }   
  
            #father *   
            {   
                margin: 10px;   
                padding: 10px;   
                border: 1px dashed red;   
            }   
  
        #son1   
        {   
        }   
  
        #son2   
        {   
        }   
  
        #son3   
        {   
        }   
    </style>  
</head>  
<body>  
    <p id="father">  
        <p id="son1">#son1</p>  
        <p id="son2">#son2</p>  
        <p id="son3">#son3-son3son3son3</p>  
        <p>  
        这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字   
        </p>  
    </p>  
</body>  
</html>

登录后复制

1、中间给#father加上position:absolute,是为了消除未定位父p的margin-top传递问题,相关内容如下

嵌套p中margin-top转移问题的解决办法

在这两个浏览器中，有两个嵌套关系的p，如果外层p的父元素padding值为0，那么内层p的margin-top或者margin-bottom的值会“转移”给外层p。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>  
  
<body>  
<p style="background-color:#FF0000;width:300px; height:100px">上部层</p>  
  
<p style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层-->  
     <p style="margin:50px; background-color:#000000;width:200px; height:200px"">子层</p>  
</p>  
  
</body>  
</html>

登录后复制

原因：盒子没有获得 haslayout 造成 margin-top无效

解决办法：
1、在父层p加上：overflow:hidden；
2、把margin-top外边距改成padding-top内边距；
3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
父层p加： padding-top: 1px;
4、让父元素生成一个 block formating context，以下属性可以实现
* float: left/right
* position: absolute
* display: inline-block/table-cell(或其他 table 类型)
* overflow: hidden/auto
父层p加：position: absolute;

显示效果为

2、1,2的float分别为left right时,有

可见1,2脱离标准流,标准流中的son3当他们不存在,于是son3代替原来son1的位置,而son1的左border、son2的右border与son3的左右border重合

3、当1,2,3全都float left时

文字围绕着float过的p

4、1,2左浮动，3右浮动，当窗口宽度减小时，3会被挤下来

当3左浮动，2右浮动的时候，显示为

当浏览器窗口宽度减小时，猜猜谁会被挤下来，son2么？

答案还是son3，规则为：写在html文件中后面的会被挤下来，在html文件中，son3在son2后面，因此总是son3先挤下来。

5、增加son1高度，son3挤下来时会卡在那里

6、删除盒子中的文字，3个子p全部左浮动
显示为

父p中的三个子p全部脱离标准流了,父p就缩成一条线了,可以用clear来修正
加一个margin-padding-border全为0,clear为both的空p,来撑大父p

III . clear清除浮动
如果前面有float:left的元素,他会影响下面元素,如上例中的p,在p元素中写clear : left即可消除前面左浮动元素对本元素的影响.同理clear:both是左右都清除.

二 . 定位position

position取值有static absolute relative fixed

1. static
这个是默认的,即标准流排下来,就是static定位方式.

2. fixed
在浏览器窗口中固定,什么论坛中的[回到顶部]这种按钮就是fixed做的
练习做个回到顶部玩玩

<p id="backToTop">   
    回到顶部   
</p>   
#backToTop   
{   
    width: 100px;   
    height: 50px;   
  
  
    background-color: red;   
    color: white;   
    cursor: pointer;   
    border-radius: 25px 0 0 25px;   
    padding-left: 20px;   
  
  
    text-align: center;   
    line-height: 50px;   
  
    position: fixed;   
    bottombottom: 80px;   
    rightright: 0;   
}

登录后复制

显示效果

3. relative相对定位

相对于自己的偏移,而且不脱离标准流,使用top/bottom left/right指定偏移量

4. absolute绝对定位

根据别的已定位元素进行定位,应用absolute规则的脱离标准流

1）、这个别的元素:
离它最近的已定位的祖先元素或者浏览器窗口,当找不到前面的祖先元素时,就以后者浏览器窗口来定位.
2）、已经定位 : 是指position已经设置,而且不是static...即position值不为static就是已经定位的元素,未设置position或设置为static认为它没有定位.
Trick

只设置 position : absolute,而不设置top/bottom/left/right值,那么元素会保持在原地,但是已经脱离标准流.

三 . display

display取值有inline block none

设置为none，即可将其隐藏，像inline-block等新添加的

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注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)

显示更多

热门话题

Java教程

1660

CakePHP 教程

1416

Laravel 教程

1311

PHP教程

1261

C# 教程

1234

显示更多

Related knowledge

vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。