美文网首页
CSS-定位4-浮动

CSS-定位4-浮动

作者: Java小工匠 | 来源:发表于2017-06-09 22:38 被阅读0次

1、浮动的概述

(1)、浮动脱离文档流,浮动的框可以向左或右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
(2)、浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。

2、文字环绕效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS-浮动</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .div1{
            width: 100px;
            height: 100px;
            background: blue;
            float: left;
        }
        .div2{
            width: 100px;
            background: red;
        }
        .div3{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <p class="div2">通过示例代码测试浮动效果</p>
    <div class="div3">3</div>
</body>
</html>

显示效果如下,div1浮动脱离文档流,div2占据div1的位置,div1相当于div2的行内元素,由于div2的宽度和div1相同,高度是自动的,因此div2的文字显示在div1的下方。

脱离文档流

文字环绕
将上述代码中的div2的宽宽设置成125px,效果如下。文字会环绕div进行显示。

文字环绕
高度塌陷
将上述代码中的div2的宽宽设置成125px,文字修改成2,效果如下。由于div1浮动脱离文档流,因此高度塌陷,div3会有部分显示,会被div1遮挡。
高度塌陷
文字溢出
将上述代码中的div2的高度成100px,文字将会溢出,显示在div3中。
文字溢出
总结
浮动后,可以把div1看成div2的行内元素,也许很多现象也许就好理解多了。

相关文章

  • CSS-定位4-浮动

    1、浮动的概述 (1)、浮动脱离文档流,浮动的框可以向左或右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止...

  • css-浮动,定位

    一,文档流的概念指什么?有哪种方式可以让元素脱离文档流? 答:文档流W3C规范中并没有document flow这...

  • CSS-定位与浮动小结

    static 默认值,指定元素使用正常的布局行为,即元素在文档流中的当前布局位置。此时top,right,bott...

  • CSS-定位5-清楚浮动

    1、CSS浮动产生原因 一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS ...

  • CSS-浮动与相对定位结合

    目录和代码 index.html index.css

  • CSS-浮动

    普通流 CSS有三种定位机制,普通流(标准流)、浮动、定位。普通流、标准流、文档流实际上就是一个网页内标签元素从上...

  • CSS-浮动定位BFC边距合并

    1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征 浮动的框可以左右移动(根据f...

  • CSS-绝对定位和浮动的区别

    一、背景 绝对定位可以产生浮动,float也会产生浮动,均会使对象脱离文档流 二、绝对定位的效果 index.ht...

  • CSS-浮动流

    浮动 网页的布局方式 什么是网页的布局方式?网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 标准流(...

  • CSS-清除浮动

    清除浮动 盒子高度问题 在标准流中内容的高度可以撑起盒子的高度 在浮动流中浮动元素内容的高不可以撑起盒子的高 清除...

网友评论

      本文标题:CSS-定位4-浮动

      本文链接:https://www.haomeiwen.com/subject/aelfqxtx.html