美文网首页
css_6 浮动原理

css_6 浮动原理

作者: basicGeek | 来源:发表于2018-11-19 11:43 被阅读0次

浮动布局:left right


特点

  • 元素浮动之后不占据原来的位置(脱标)
  • 浮动的盒子在一行上显示
  • 行内元素浮动之后转换为行内块元素。(不推荐使用,转行内元素最好使用display: inline-block;)

浮动作用

  • 文本绕图
  • 制作导航
  • 网页布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body{
        margin:0 ;
    }
        .red,.green,.blue{
            width: 200px;
            height: 200px;
        }
        .red{
            background: red;
            float:left;
        }
        .green{
            background: green;
            float:left;
        }
        .blue{
            background: blue;
            float:right;

        }
        span{
            float: left;
            background: pink;
            width:100px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <span></span>
</body>
</html>
浮动原理

相关文章

  • css_6 浮动原理

    浮动布局:left right 特点 元素浮动之后不占据原来的位置(脱标) 浮动的盒子在一行上显示 行内元素浮动之...

  • css 布局:两边固定中间自适应

    解析四种常用方法以及原理:浮动、浮动内嵌 div、定位、flex。 浮动 原理: 浮动元素和非浮动元素不在同一个立...

  • CSS第四节(第八天)

    1.浮动原理 2.内容溢出处理 1.浮动原理 标准流 *从上往下排布,从左往右排布 浮动特性 *浮动脱离标准流,不...

  • 浮动原理

  • CSS清除浮动

    浮动原理 浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。 清除浮动:解决高度坍塌问题 方...

  • 前端面试题总结【19】:CSS浮动

    解释下浮动和它的工作原理?清除浮动的技巧 浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边...

  • 04浮动原理

    float: float:left | right | none | inherit 1、块在一行显示 2、内嵌支...

  • 如何理解css浮动以及清除浮动

    偶然间在博客园看到一篇非常棒的讲解浮动与清除浮动原理的文章 This is CSS清除浮动 link.

  • 设置1个div 浮在另一个上方

    原理:子 div 以 relative 的方式浮动在父 div 上方。

  • 六种姿势实现三栏布局

    一、浮动 原理:left和right放在center前,并分别左右浮动,center是块级元素宽度会自动撑开 二、...

网友评论

      本文标题:css_6 浮动原理

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