css的浮动

最新推荐文章于 2024-10-29 22:55:09 发布

原创最新推荐文章于 2024-10-29 22:55:09 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

7 篇文章

订阅专栏

1.浮动的标签：脱离文档流的标签元素；

2.css的float属性和position属性都可以让标签元素浮动起来；

3.示例：

float示例一：

具有float属性的标签脱离文档流，其原本的位置被紧接着的元素占有

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .boxLeft {
                width: 400px;
                height: 400px;
                background: red;

                float: left;
            }
            .boxRight {
                width: 400px;
                height: 400px;
                background: green;
            }
        </style>
    </head>
    <body>
        <div class="boxLeft"></div>
        <div class="boxRight"><div>
    </body>
</html>

float示例二：

子标签具有float属性，为防止子元素内容溢出，父元素添加overflow：auto

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .boxParent {
                width: 400px;
                background: red;
                overflow: auto;
                zoom: 1;
            }
            img {
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="boxParent">
            <img src="http://www.learnlayout.com/images/ilta.png" />
        </div>
    </body>
</html>

float示例三：

避免紧接着的元素占用有float属性元素的原本位置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .boxLeft {
                width: 400px;
                height: 400px;
                background: red;
                float: left;
            }
            .boxRight {
                width: 400px;
                height: 400px;
                background: green;
                clear: left;
            }
        </style>
    </head>
    <body>
        <div class="boxLeft"></div>
        <div class="boxRight"><div>
    </body>
</html>

position示例一：

position的relative相对于其原本应占有的位置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .box {
                width: 400px;
                height: 400px;
                background: red;
                position: relative;
                top: 50px;
                left: 50px;
            }
        </style>
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>

position示例二：

position的absolute是相对于父元素的relative以上属性

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>xxx</title>
       <style type="text/css">
           .boxOutside {
               width: 400px;
               height: 400px;
               background: red;
               position: relative;
           }
           .boxInside {
               width: 200px;
               height: 200px;
               background: green;
               position: absolute;
               bottom: 0px;
               right: 0px;
           }
       </style>
   </head>
   <body>
       <div class="boxOutside">
           <div class="boxInside"><div>
       </div>
   </body>
</html>

position示例三：

position的fixed相对于浏览器的窗口

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .box {
                width: 400px;
                height: 400px;
                background: red;
                position: fixed;
                right: 0px;
                bottom: 0px;
            }
        </style>
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>