CSS中浮动布局float（小米布局案例、导航栏案例、overflow）

最新推荐文章于 2024-05-05 20:21:31 发布
最新推荐文章于 2024-05-05 20:21:31 发布
阅读量2.4k 收藏 38
点赞数 6
分类专栏： 前端 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44799217/article/details/122449249
版权

1. CSS 布局的三种机制

        网页布局的核心——就是用 CSS 来摆放盒子。

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，

其中：

普通流（标准流）

  • 块级元素会独占一行，从上向下顺序排列；

    • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

  • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；

    • 常用元素：span、a、i、em等

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            background-color: orange;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div>青春正能量</div>
    <div>青春正能量</div>
    <span>青春正能量</span>
    <span>青春正能量</span>
</body>

</html>

浮动

  • 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。

定位

  • 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是js 特效。

2. 为什么需要浮动？

虽然知道行内块（inline-block） 但是他却有自己的缺陷：

  1. 它可以实现多个元素一行显示，但是中间会有空白缝隙。

  2. 它不能实现盒子左右对齐

因此标准流不能满足我们的需要了，需要浮动来完成网页布局。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            display: inline-block;
            background-color: orange;
        }

        .demo {
            background-color: orangered;
        }
    </style>
</head>

<body>
    <div>青春正能量</div>
    <div class="demo">青春正能量</div>
    <div>青春正能量</div>
</body>

</html>

3. 什么是浮动(float)

元素的浮动是指设置了浮动属性的元素会

  1. 脱离标准普通流的控制

  2. 移动到指定位置。

作用

  1. 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。

  2. 可以实现盒子的左右对齐等等..

  3. 浮动最早是用来控制图片，实现文字环绕图片的效果。

语法：

选择器 { float: 属性值; }
属性值描述
none元素不浮动（默认值）
left元素向左浮动
right元素向右浮动

特点1：  【浮。脱离标准流。 俗称 “脱标”】

.box1 {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    float: left;
}
.box2 {
    width: 150px;
    height: 300px;
    background-color: skyblue;
}

float 属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo1 {
            /*不是标准流了， 漂浮起来， 浮在 标准流的上面*/
            float: left;
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        .demo2 {
            width: 300px;
            height: 300px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="demo1">青春正能量</div>
    <div class="demo2">青春正能量</div>
</body>

</html>

特点2： 【漏】

.box1 {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    /* 让第 1 个盒子漂浮起来，不占位置 */
    float: left;
}
.box2 {
    width: 150px;
    height: 300px;
    background-color: skyblue;
}

box2下面的跑到box1盒子下面了， 被box1给压住了，遮挡起来了

特点3： 【特  float属性会改变元素display属性 】

        任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和行内块极其相似。

div {

    width: 200px;

    height: 200px;

    background-color: pink;

    /* 转换为行内块元素，可以水平显示，不过 div 之间有间隙，不方便处理 */

    /* display: inline-block; */

    /* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */

    float: left;
}

.two {

    background-color: hotpink;

}

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*这个盒子div 添加浮动之后，不再是 块级元素 默认相当于类似转换为了 inline-block*/
        .demo1 {
            float: left;
            height: 100px;
            background-color: orange;
        }

        .demo2 {
            float: left;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="demo1">青春正能量</div>
    <div class="demo2">青春正能量</div>
</body>

</html>

 float —— 浮漏特

特点说明
浮加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*浮动元素默认之间没有缝隙 和真正的行内块有区别*/
        .demo1,
        .demo2 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .demo1 {
            float: left;
        }

        .demo2 {
            background-color: purple;
            float: left;
        }

        .demo3 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="demo1">青春正能量</div>
    <div class="demo2">青春正能量</div>
    <div class="demo3">青春正能量</div>
</body>

</html>

 

4. 浮动(float)的应用

浮动和标准流的父盒子搭配

        浮动是脱标的，会影响下面的标准流元素，此时需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响。

4.1 小米布局案例

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*清除元素默认内外边距样式*/
        * {
            margin: 0;
            padding: 0;
        }

        /*清除列表样式 前面的小点点*/
        li {
            list-style: none;
        }

        .box {
            width: 1226px;
            height: 615px;
            background-color: orange;
            margin: auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: orangered;
        }

        .left img {
            /*width: 234px;*/
            width: 100%;
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: skyblue;
        }

        .right li {
            float: left;
            width: 234px;
            height: 300px;
            background-color: tomato;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">
            <img src="mi.jpg" alt="">
        </div>
        <ul class="right">
            <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>
    </div>
</body>

</html>

4.2 导航栏案例

        实际重要的导航栏中，不会直接用链接a 而是用 li 包含链接(li+a)的做法。

  1. li+a 语义更清晰，一看这就是有条理的列表型内容。

  2. 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .banner {
            width: 760px;
            height: 150px;
            background-color: pink;
            margin: auto;
        }

        .nav {
            width: 760px;
            height: 32px;
            /*background-color: pink;*/
            margin: 0 auto;
            background: url(nav_bg.jpg) repeat-x;
        }

        .nav ul li {
            /*因为li 让文字竖着显示，所以必须给li 添加浮动*/
            float: left;
        }

        .nav ul li a {
            /*a是行内元素需要转换*/
            /*一定给a 大小，  因为我们需要 a:hover*/
            display: block;
            width: 80px;
            line-height: 32px;
            height: 32px;
            /*background-color: pink;*/
            background: url(button1.jpg) no-repeat;
            font-size: 12px;
            text-decoration: none;
            color: #40510a;
            text-align: center;

        }

        .nav ul li a:hover {
            background-image: url(button2.jpg);
        }
    </style>
</head>

<body>
    <!-- banner 是广告条的 -->
    <div class="banner">
        <img src="banner.jpg" alt="">
    </div>
    <!-- nav 导航栏部分  -->
    <!-- 以后我们重要的导航栏，都要采取 li 包含a 的写法 -->
    <div class="nav">
        <ul>
            <li><a href="#">网站首页</a></li>
            <li><a href="#">网站首页</a></li>
            <li><a href="#">网站首页</a></li>
            <li><a href="#">网站首页</a></li>
            <li><a href="#">网站首页</a></li>
            <li><a href="#">网站首页</a></li>
        </ul>
    </div>
</body>

</html>

4.3 浮动元素与父盒子的关系

  • 子盒子的浮动参照父盒子对齐

  • 不会与父盒子的边框重叠，也不会超过父盒子的内边距

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo1 {
            width: 500px;
            height: 500px;
            background-color: pink;
            border: 20px solid red;
            padding: 20px;
        }

        .demo2 {
            float: right;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="demo1">
        <div class="demo2">青春正能量</div>
    </div>
</body>

</html>

 

4.4 浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

  • 浮动的，那么当前盒子会与前一个盒子的顶部对齐；

  • 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

 示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo1 {
            width: 500px;
            height: 500px;
            background-color: orange;
        }

        .demo2 {
            float: left;
            width: 150px;
            height: 150px;
            background-color: purple;
        }

        .demo3 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="demo1">
        <div class="demo2">青春正能量</div>
        <div class="demo3">青春正能量</div>
    </div>
</body>

</html>

示例代码2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo1 {
            width: 500px;
            height: 500px;
            background-color: orange;
        }

        .demo2 {
            width: 150px;
            height: 150px;
            background-color: purple;
        }

        .demo3 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="demo1">
        <div class="demo2">青春正能量</div>
        <div class="demo3">青春正能量</div>
    </div>
</body>

</html>

 

5. 清除浮动

5.1 为什么要清除浮动

        因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

总结：

  • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

  • 准确地说，并不是清除浮动，而是清除浮动后造成的影响

示例代码1：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo1 {
            /*demo1是父级，但是很多情况下，不方便给高度 子盒子有多少内容，就显示多少内容，自动撑开父亲最为合理*/
            width: 500px;
            background-color: orange;
        }

        .demo2 {
            width: 150px;
            height: 150px;
            background-color: purple;
        }

        .demo3 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        .demo4 {
            width: 700px;
            height: 150px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="demo1">
        <div class="demo2">青春正能量</div>
        <div class="demo3">青春正能量</div>
    </div>
    <div class="demo4">青春正能量</div>
</body>

</html>

示例代码2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo1 {
            /*demo1是父级，但是很多情况下，不方便给高度 子盒子有多少内容，就显示多少内容，自动撑开父亲最为合理*/
            width: 500px;
            background-color: orange;
        }

        /*因为demo2  浮动了，不占有位置， 而父级又没有高度， 所以demo4 就到底下去了*/
        .demo2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        .demo3 {
            float: left;
            width: 250px;
            height: 250px;
            background-color: skyblue;
        }

        .demo4 {
            width: 700px;
            height: 150px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="demo1">
        <div class="demo2">青春正能量</div>
        <div class="demo3">青春正能量</div>
    </div>
    <div class="demo4">青春正能量</div>
</body>

</html>

 

5.2 清除浮动本质

        清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

5.3 清除浮动的方法

        在CSS中，clear属性用于清除浮动

选择器{clear:属性值;}   clear 清除
属性值描述
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo1 {
            /*demo1是父级，但是很多情况下，不方便给高度 子盒子有多少内容，就显示多少内容，自动撑开父亲最为合理*/
            width: 500px;
            background-color: orange;
            border: 1px solid red;
        }

        /*因为demo2  浮动了，不占有位置， 而父级又没有高度， 所以demo4 就到底下去了*/
        .demo2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        .demo3 {
            float: left;
            width: 250px;
            height: 250px;
            background-color: skyblue;
        }

        .demo4 {
            width: 700px;
            height: 150px;
            background-color: yellow;
        }

        /*清除浮动*/
        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="demo1">
        <div class="demo2">青春正能量</div>
        <div class="demo3">青春正能量</div>
        <div class="clear">青春正能量</div>
    </div>
    <div class="demo4">青春正能量</div>
</body>

</html>

 

1).额外标签法(隔墙法)

    通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

  • 优点： 通俗易懂，书写方便

  • 缺点： 添加许多无意义的标签，结构化较差。

2).父级添加overflow属性方法

    可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。
  • 优点： 代码简洁
  • 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid orange;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div>
        <p>青春正能量</p>
        <p>青春正能量</p>
        <p>青春正能量</p>
        <p>青春正能量</p>
        <p>青春正能量</p>
        <p>青春正能量</p>
        <p>青春正能量</p>
        <p>青春正能量</p>
        <p>青春正能量</p>
        <p>青春正能量</p>
    </div>
</body>

</html>

示例代码2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo1 {
            /*demo1是父级，但是很多情况下，不方便给高度 子盒子有多少内容，就显示多少内容，自动撑开父亲最为合理*/
            width: 500px;
            background-color: orange;
            border: 1px solid red;
            /*给父级添加 overflow 就可以清除浮动*/
			overflow: scroll;
        }

        /*因为demo2  浮动了，不占有位置， 而父级又没有高度， 所以demo4 就到底下去了*/
        .demo2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        .demo3 {
            float: left;
            width: 250px;
            height: 250px;
            background-color: skyblue;
        }

        .demo4 {
            width: 700px;
            height: 150px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="demo1">
        <div class="demo2">青春正能量</div>
        <div class="demo3">青春正能量</div>
    </div>
    <div class="demo4">青春正能量</div>
</body>

</html>

 

3).使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

使用方法：

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   
​
 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

  • 优点： 符合闭合浮动思想 结构语义化正确

  • 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*声明清除浮动的样式*/
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }

        .clearfix {
            *zoom: 1;
            /*ie6,7 专门清除浮动的样式*/
        }

        .demo1 {
            /*demo1是父级，但是很多情况下，不方便给高度 子盒子有多少内容，就显示多少内容，自动撑开父亲最为合理*/
            width: 500px;
            background-color: orange;
            border: 1px solid red;
        }

        /*因为demo2  浮动了，不占有位置， 而父级又没有高度， 所以demo4 就到底下去了*/
        .demo2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        .demo3 {
            float: left;
            width: 250px;
            height: 250px;
            background-color: skyblue;
        }

        .demo4 {
            width: 700px;
            height: 150px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="demo1 clearfix">
        <div class="demo2">青春正能量</div>
        <div class="demo3">青春正能量</div>
    </div>
    <div class="demo4">青春正能量</div>
</body>

</html>

4).使用双伪元素清除浮动

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
  • 优点： 代码更简洁
  • 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*声明清除浮动的样式*/
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .demo1 {
            /*demo1是父级，但是很多情况下，不方便给高度 子盒子有多少内容，就显示多少内容，自动撑开父亲最为合理*/
            width: 500px;
            background-color: orange;
            border: 1px solid red;
        }

        /*因为demo2  浮动了，不占有位置， 而父级又没有高度， 所以demo4 就到底下去了*/
        .demo2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        .demo3 {
            float: left;
            width: 250px;
            height: 250px;
            background-color: skyblue;
        }

        .demo4 {
            width: 700px;
            height: 150px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="demo1 clearfix">
        <div class="demo2">青春正能量</div>
        <div class="demo3">青春正能量</div>
    </div>
    <div class="demo4">青春正能量</div>
</body>

</html>

5.4 清除浮动总结

  1. 父级没高度

  2. 子盒子浮动了

  3. 影响下面布局了，我们就应该清除浮动了。

清除浮动的方式优点缺点
额外标签法（隔墙法）通俗易懂，书写方便添加许多无意义的标签，结构化较差。
父级overflow:hidden;书写简单溢出隐藏
父级after伪元素结构语义化正确由于IE6-7不支持:after，兼容性问题
父级双伪元素结构语义化正确由于IE6-7不支持:after，兼容性问题
IT之一小佬
关注
  • 6
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
CSS案例-6.浮动练习
m0_46279684的博客
03-22 907
脱离标准流，漂浮起来，不占用原有的位置，浮动在标准流的上面，所以第二个标准流会躲到浮动盒子的下面。浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素。右小盒子：长234px，宽300px，间距14px。小盒子：长269px，宽285px，间距14px。大盒子：长1200px，宽460px。大盒子：长1226px，宽285px。大盒子：长1226px，宽615px。右盒子：长970px，宽460px。左盒子：长234px，宽615px。右盒子：长992px，宽615px。
通俗易懂的CSS的常见布局方式以及浮动float详解（小白必看，会有帮助滴）
wangshuo0520ai的博客
03-01 843
通俗易懂的CSS的常见布局方式以及浮动float详解（小白必看，会有帮助滴）
css浮动(float）详解
weixin_45123004的博客
02-23 2597
浮动详解 一、什么是浮动？ 浮动，顾名思义，就是漂浮的意思。指的是一个元素脱离文档流，悬浮在父元素之上的现象。 二、如何产生浮动？ 给元素本身添加float属性 float： 值 作用 left 元素向左浮动 right 元素向右浮动 none 默认值。元素不浮动，并会显示在其在文本中出现的位置 inherit 规定应该从父元素继承 float 属性的值 三、浮动有...
CSS中的Float（浮动）
最新发布
GZM888888的博客
05-05 1160
Float是CSS中的一种布局方式，它允许元素脱离正常的文档流，并向左或向右浮动。Float属性最初是为了实现文字环绕图片的效果而设计的，但现在已经被广泛应用于网页布局中。
CSS浮动文摘
08-02 479
很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。 写在前面的话： 由于CSS内容比较多，没有精力从头到尾讲一遍，只能有针对性的讲解。 如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。 本文以div元素布局为例。 教程开始： ...
css的浮动详解
m0_56713342的博客
10-18 1578
浮动 ：就是使用float样式，使元素脱离文档流可选值：none 默认值，不设置浮动left 向左浮动right 向右浮动一般情况下，我们是不给父元素设置高度的， 让其内部的子元素自动撑开父元素的高度， 这样父元素的高度就可以随着子元素高度的变化而变化 ,.然而子元素若设置浮动，就会脱离文档流，也就撑不开父元素的高度从而导致父元素的高度丢失，影响整个页面布局，这就叫高度塌陷。
CSS 浮动Float
qq_35976650的博客
02-24 361
文章目录一、float的基本介绍二、实现文本环绕效果1、文本环绕图片2、浮动遇上内联元素3、文字环绕内联元素三、浮动的原因及副作用1、原因及副作用2、浮动副作用四、浮动副作用的解决1、手动给父元素添加高度2、Clear属性3、overflow与zoom4、给父元素添加浮动五、应用案例 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列，在布局时非常有用。 ★ 浮动的框...
CSS分栏布局的方法:绝对定位和浮动
12-01
在CSS布局设计中，创建分栏布局是网页设计的基础任务之一。主要的两种方法是绝对定位（Absolute Positioning）和浮动（Floating）。这两种方法各有特点，适用于不同的场景，并且可以根据需求互相配合使用。 1. **...
布局：浮动导航栏练习.zip
04-04
这个"布局：浮动导航栏练习.zip"文件显然是一个关于如何创建这种效果的学习资源，主要涉及到CSS3技术。在本文中，我们将深入探讨浮动导航栏的实现原理以及相关CSS3属性的使用。 首先，我们需要理解浮动的概念。在...
详解CSS布局中浮动问题的四种解决方案
11-19
在CSS布局中，浮动元素（通常使用`float:left`或`float:right`）常用于创建多列布局，但在处理浮动元素时，一个常见的问题是“高度塌陷”或“父元素高度无法自适应”。这是因为浮动元素脱离了标准文档流，不再对父...
网页切图的CSS和布局经验与要点
12-13
网页切图是网页设计过程中的重要环节，它涉及到CSS布局和优化。对于初学者来说，掌握这一技能至关重要。以下是一些关键的知识点和实践经验： 1. **以图换字技术**：在创建网站LOGO时，通常使用`<h1>`标签结合`<a>`...
使用CSS布局定位属性轻松实现优美站点布局
09-25
熟练掌握以上CSS布局定位属性，可以实现丰富的网页布局效果，如响应式设计、固定导航栏、侧边栏浮动、自适应图片等。理解这些属性的工作原理并灵活运用，将有助于提升网页设计的质量和用户体验。在实际项目中，结合...
【CSS】浮动 ④ ( 浮动布局案例 - 电商布局模块 | 案例分析 | 布局测量摆放 | 浮动布局代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-22 807
一、案例效果 二、案例分析 三、布局测量摆放 四、完整摆放效果
Float浮动 及 清除浮动
敏敏的博
11-17 872
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、什么是浮动Float？二、为什么需要浮动？三、浮动的特性1.具有行内块元素的特性2.脱标四、浮动可能产生的影响1、后续标准流被覆盖2、父级盒子高度塌陷问题五、清除浮动1、额外标签法（隔墙法）2、父级添加 overflow 属性3、父级添加after伪元素4、父级添加双伪元素总结 前言 本篇文章总结了float可能对布局产生的影响及清除浮动的方法 提示：以下是本篇文章正文内容，下面案例可供参考 一、什么是浮动Float？
css、HTML制作小米商城网页（一）
m0_70516782的博客
07-06 1775
制作首页导航栏属性： float:（浮动）display: block;（显示块元素）display: none;（隐藏块元素）margin（外边距） :hover（悬浮变色）border（边框） line-height:（行高） padding（内边距）border-style（边框样式）text-shadow: 1px 1px 1px red(红); 阴影效果 可选值: 水平效果(必填)，垂直效果(必填)，模糊半径(选填)，颜色(选填)代码：
浮动float：浮动的工作原理和特性及清除浮动方法
ukiYee_0514的博客
07-02 576
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止(会挨着父元素左边或右边排列，如果之前有浮动的元素 会挨着浮动的元素排列)。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动的元素虽然会脱离正常的文档流，但它还是会影响到正常文档流中的文字排版。
指针的指针
zlf0727的专栏
10-02 561
一个指针变量可以指向整型变量、实型变量、字符类型变量，当然也可以指向指针类型变量。当这种指针变量用于指向指针类型变量时，我们称之为指向指针的指针变量，这话可能会感到有些绕口，但你想到一个指针变量的地址就是指向该变量的指针时；这种双重指针的含义就容易理解了。下面用一些图来描述这种双重指针，见图6-13。 在图中，整型变量i的地址是&i，将其传递给指针变量p，则p指向i；实型变量j的地址是&j，将其传
【前端初学者】【案例】之CSS浮动布局：简单网页布局练习——附代码实操（下）
HY_Sophie的博客
11-23 630
【前端初学者】【案例】之CSS浮动布局：简单网页布局练习——附代码实操（下）
css浮动的一些小练习
m0_51045721的博客
02-26 1729
1.小米模块练习 需求： 使用浮动，完成设计图中的布局效果
html侧边导航栏,浮动侧边导航栏的基本布局
06-01
HTML侧边导航栏的基本布局可以使用HTML和CSS来实现。...如果要实现浮动侧边导航栏，可以将`#sidebar`的`position`属性改为`relative`，并在`#main`中使用`float: left`来实现。具体实现方式可以根据实际需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值