HTML 悬浮float介绍

时间 2020-05-21

标签 html 悬浮 float 介绍栏目 HTML 繁體版

原文原文链接

关于float的一些用法

左悬浮: float:left;
右悬浮:float:right;css

float用法

float的用途比较广, 这里简单的介绍下集中常有的用法:html

在接触到浮动前,我会去设置一些inline-block, block的属性配合着div的镶嵌去完成页面的排版. 然后接触到了浮动这一属性, 直接让元素漂浮起来简易了不少,悬浮中不区分块级元素(block),行内元素(inline),或者是行内块元素(inline-block). float也会随着父元素width大小的改变而自动排版,eg.直接调整可视窗口,会将元素挤到下一行.
此外, 就刚了解的SEO优化而言, 因为浏览器的解析是从上而下的. 所以不少时候重要的内容写在前面,把一些不重要的或者是广告什么的写在后面.可是又想让用户注意到广告,所以,不少时候把主内容居中排列, 广告这些的左右悬浮, 相信常常浏览网页的朋友的也注意到了这点

接下来来说讲悬浮的一些书写和效果吧

~~若是子元素悬浮了,会形成父元素的高度塌陷.这块涉及到了清除悬浮,下一章会说起清除悬浮的讲解~~
那么言归正传,浏览器

第一个现象 float=inline-block

悬浮会是4个方块变成行内块模式的样式呈现:以下图所示优化

<style>
        div{
            width:200px;
            height:200px;
            background-color:  pink;
            border:1px solid black;
            float:left;
        }
    </style>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

第二现象:

以下图所示, 因为第一个悬浮起来了,所以第二个块元素会呈如今第一个下面.
可是后面一个元素悬浮起来,不会越过到前面一个元素上面,如第四个块元素悬浮,可是第三个没有悬浮.第四季块元素保持在原来位置上.spa

<style>
        .first-one{
            float:left;
            background-color:green;
        }
        .second-one{
            background-color:purple;
        } 
        .third-one{
           
            background-color:blue;
        } 
        .fourth-one{
            float:left;
            background-color:grey;
        } 
        div{
            width:200px;
            height:200px;
            background-color:  pink;
            border:1px solid black;
            font-size:30px;
        }
    </style>

<body>
    <div class= "first-one"></div>
    <div class= "second-one"></div>
    <div class= "third-one"></div>
    <div class="fourth-one"></div>
</body>

第三个现象:

若是元素所有漂浮, 父元素剩余宽度不够支持子元素在该行排列那么他会向上一级靠齐code

后面会持续更新一些html css的知识点htm

1. HTML之float浮动
2. 【html】【6】div浮动float
3. HTML定位和布局----float浮动
4. float浮动
5. CSS Float（浮动）
6. 之前写的纯HTML+css 的悬浮
7. CSS 浮动Float
8. CSS浮动（Float）
9. CSS浮动float
10. CSS Float(浮动)
更多相关文章...
• Eclipse 悬浮提示 - Eclipse 教程
• 网站主机介绍 - 网站主机教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• YAML 入门教程