欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

8、浮动

程序员文章站 2022-03-15 23:09:59
...

一、清除浮动，塌陷，及兼容IE的技巧

下面的样式可以解决一些清除浮动，塌陷，及兼容IE的问题，还是非常有用的。

<style type="text/css">
        .clearfix:before,.clearfix:after{
            content:"";
            display:table;
        }
        .clearfix:after{
            clear:both;
        }
        .clearfix{
            zoom:1;
        }
    </style>

二、文字绕图效果

在一个盒子下存在两个盒子，且第一个盒子浮动，第二个不浮动，则会造成文字绕图效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .one{
            width:450px;
            height:210px;
            border:1px solid black;
            margin:50px auto 0;

        }
        .two{
            width:80px;
            height:80px;
            background-color:gold;
            float:left;
        }
        .three{
            background-color:green;
            height:210px;
        }
    </style>
</head>
<body>
     <div class="one">
         <div class="two"></div>
         <div class="three"></div>
     </div>
</body>
</html>

8、浮动

三、清除浮动

子级使用浮动的情况下，如果父级盒子不设高度，子级就无法撑开父级盒子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .list{
            width:210px;
            border:1px solid black;
            margin:50px auto 0;
            list-style:none;
            padding:0;
        }
        .list li{
            width:50px;
            height:50px;
            background-color:gold;
            margin:10px;
            float:left;
        }
    </style>
</head>
<body>
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</body>
</html>

8、浮动
这时就需要清除浮动：
· 父级上增加属性：overflow：hidden;；
· 在最后一个子元素的后面加一个空的div，给它样式属性：style="clear both"（不推荐）；
· 使用成熟的清除浮动样式类：clearfix（最通用，实用）
注：clearfix一般先写样式，然后加到需要清除浮动父级元素即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .list{
            width:210px;
            border:1px solid black;
            margin:50px auto 0;
            list-style:none;
            padding:0;
        }
        .list li{
            width:50px;
            height:50px;
            background-color:gold;
            margin:10px;
            float:left;
        }


        .clearfix:after{
            content:"";
            display:table;
            clear:both;
        }


    </style>
</head>
<body>
<ul class="list clearfix">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</body>
</html>

8、浮动

相关标签： 心得

上一篇： Spring Cloud（第二章）服务提供者 Eureka + 服务消费者（rest + Ribbon）

下一篇： AS打包出现问题：Keystore file xxx not found for signing config 'externalOverride'.

推荐阅读