day 3 浮动

最新推荐文章于 2024-07-26 15:05:55 发布

banana tree

最新推荐文章于 2024-07-26 15:05:55 发布

阅读量63

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/lemon_shinning/article/details/124179893

版权

一、浮动

1、浮动的定义

元素脱离文档流，按照指定的方向发生移动，遇到父级边界换行。

2、浮动的取值

none	不浮动
left	左浮动
right	右浮动
inherit	继承父级

3、浮动的作用

解决水平布局问题。

4、浮动的特征

1）所有标签同排显示

2）行标签支持所有css样式

3）默认内容撑开宽高

4）元素脱离文档流

二、清除浮动

1、原因

脱离文档流，父级元素检测不到自己的存在，高度无法撑开。

2、解决方案

1）在父级使用height,但是它拓展性不好，不经常使用

2）在父级使用overflow:hidden

3）使用clear

三、浮动案例

实现下图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fd</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 270px;
            height: 300px;
        }
        ul li{
            width: 270px;
            height: 36px;
            border-bottom: 1px solid #d0cccc;
        }
        li p{
            float: left;
        }
        li .l{
            width: 50px;
            height: 36px;
            line-height: 36px;
            color: #d0cccc;
        }
        li .c{
            width: 150px;
            height: 36px;
            line-height: 36px;
        }
        li .r{
            line-height: 36px;
            color: #d0cccc;
            float: right;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <p class="l">(游戏)</p>
            <p class="c">射手凶猛</p>
            <p class="r">LOL</p>
        </li>
        <li>
            <p class="l">(都市)</p>
            <p class="c">洛杉矶神探</p>
            <p class="r">警察</p>
        </li>
        <li>
            <p class="l">(游戏)</p>
            <p class="c">超凡血统整合体</p>
            <p class="r">超凡血统</p>
        </li>
        <li>
            <p class="l">(都市)</p>
            <p class="c">我能召唤历史喵</p>
            <p class="r">历史猫咪</p>
        </li>
        <li>
            <p class="l">(仙侠)</p>
            <p class="c">开局女魔头负</p>
            <p class="r">女魔头</p>
        </li>
    </ul>
</body>
</html>