html css学习笔记-浮动

最新推荐文章于 2023-07-07 20:59:48 发布

绿叶清风

最新推荐文章于 2023-07-07 20:59:48 发布

阅读量747

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/PZ0605/article/details/45752691

版权

html/css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #fd{
            width: 50px;
            height: 50px;
           background-color: #FF0000;
            /*指定了浮动，不再占有页面的位置，如果后面不浮动，会被后面的元素挡住*/
            float: left;
        }
        #sd{
            width: 50px;
            height: 50px;
            background-color: green;
            float: left;
        }
        #td{
            width: 50px;
            height: 50px;
            background-color: yellow;
            float: left;
        }
        /*如果主容器不能承载浮动的子元素，子元素会自动换行*/
        #continter{
            width: 120px;
            height: 300px;
           background-color: gray;
        }
    </style>
</head>
<body>
<!--
  浮动：
  float有四个属性值：
    left:
    right
    none
    inherit:从父级继承浮动属性
  clear:
    去掉浮动属性（包括继承来的属性）
  clear:left right both  inherit:从父级继承来的clear值
-->


<div id="continter">
    <div id="fd"></div>
    <div id="sd"></div>
    <div id="td"></div>
    <!--文字歝认会继承前面的浮动,一般会去浮-->
    <div>hello world</div>
</div>
</body>
</html>