Day3_0414 浮动

最新推荐文章于 2024-03-15 18:22:43 发布

阿拉灯神丁吖

最新推荐文章于 2024-03-15 18:22:43 发布

阅读量51

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_52335062/article/details/124181465

版权

1、浮动的定义：

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

2、浮动的取值：

●none：不浮动，不设置取值时默认不浮动；

●left：左浮动；

●right：右浮动；

●inherit：继承父级；

<!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>float</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .f1{
            width: 50px;
            height: 50px;
            background-color: aqua;
            float: none;
        }
        .f2{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            float: right;
        }
        .f3{
            width: 80px;
            height: 80px;
            background-color: red;
            float: left;
        }
        .f4{
            width: 80px;
            height: 80px;
            background-color: rgb(0, 255, 170);
            float: left;
        }
    </style>
</head>
<body>
    <div class="f1" ></div>
    <div class="f2" ></div>
    <div class="f3"></div>
    <div class="f4"></div>
</body>
</html>

3、浮动的作用：

解决水平布局问题。

4、浮动的特性：

●所有标签同排显示；

●行标签支持所有css样式；

●默认内容撑开高度；

●元素脱离文档流；

5、清除浮动：

●原因：元素使用浮动后脱离文档流，父级元素检测不到子级的存在，高度无法撑开。

●解决方案：（1）在父级使用height；

（2）在父级使用overflow:hidden；

（3）使用clear；

6、浮动案例实现：

<!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>work1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            margin-left: 10px;
            margin-top: 10px;
            width: 217px;
            height: 414px;
            border: 1px solid #d4cece;
            border-radius: 5px;
        }
        li {
            width: 217px;
            height: 46px;
        }
        li p {
            float: left;
            height: 46px;
            line-height: 46px;
        }
        li .nth {
            width: 34px;
            text-align: center;
            color: #878c9c;
        }
        li .news {
            width: 183px;
            overflow: hidden;
        }
    </style>
</head>
<body>
        <ul>
            <li>
                <p style="color: #ff001a" class="nth">1</p>
                <p class="news">《武林外传》！！！</p>
            </li>
            <li style="background-color: #f6f7f8;">
                <p style="color: #ff001a" class="nth">2</p>
                <p class="news" >奶茶人生</p>
            </li>
            <li>
                <p style="color: #ff001a" class="nth">3</p>
                <p class="news">国家真实比例2</p>
            </li>
            <li style="background-color: #f6f7f8;">
                <p class="nth">4</p>
                <p class="news">我总不能耗尽一生，只…”</p>
            </li>
            <li>
                <p class="nth">5</p>
                <p class="news">【花瓶手书】花花想要变得</p>
            </li>
            <li style="background-color: #f6f7f8;">
                <p class="nth">6</p>
                <p  class="news">重铸四月番荣光！</p>
            </li>
            <li>
                <p  class="nth">7</p>
                <p class="news">那就让我们祝星有野生日快乐</p>
            </li>
            <li style="background-color: #f6f7f8;">
                <p  class="nth">8</p>
                <p  class="news">百兽之王最强最后杀招！</p>
            </li>
            <li>
                <p  class="nth">9</p>
                <p  class="news">璃月，但是乡村特供版</p>
            </li>
        </ul>
</body>
</html>

7、不设置overflow:hidden的效果：文字会有重叠现象

阿拉灯神丁吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day3_0414 浮动

1、浮动的定义：元素脱离文档流，按照指定方向发生移动，遇到父级边界换行。2、浮动的取值：●none：不浮动，不设置取值时默认不浮动；●left：左浮动；●right：右浮动；●inherit：继承父级；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content
复制链接

扫一扫