CSS浮动

最新推荐文章于 2024-09-06 11:11:46 发布
最新推荐文章于 2024-09-06 11:11:46 发布
阅读量227 收藏
点赞数 1
分类专栏： Web前端开发 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62217723/article/details/126410897
版权
本文详细介绍了浮动布局在网页设计中的常见应用场景，如文字环绕和横向排列，并阐述了浮动元素的基本特性，包括左浮动、右浮动以及高度坍塌问题。通过浮动练习案例展示了如何创建电影分类筛选区域和电影列表，同时讨论了解决高度坍塌的清除浮动方法。文章还包含了相关CSS样式代码，帮助理解浮动布局的实际运用。
摘要由CSDN通过智能技术生成

文章目录

浮动

1、应用场景

  1. 文字环绕

  2. 横向排列

2、浮动基本特变

修改float属性：
-left：左浮动，元素靠上靠左
-right:右浮动元素靠上靠右
默认值为none

  1. 当一个元素浮动后，元素必定为块盒（更改dispaly属性为block）。
  2. 浮动元素的包含块和常规流一样，为父元素的内容盒。

3、盒子尺寸

  1. 宽度为auto时，适应内容宽度
  2. 高度为auto时，与常规流一样，适应内容高度
  3. margin为auto时，为0
  4. 边框、内边距、百分比设置与常规流一样

4、盒子排列

  1. 左浮动的盒子靠上靠左排列
  2. 右浮动的盒子靠上靠右排列
  3. 浮动盒子在包含块中排列时，会避开常规流块盒
  4. 常规流块盒在排列时，无视浮动盒子
  5. 行盒在排列时，会避开浮动盒子

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒

<img src="./hashiqi.jpg" alt="" style="width:200px;float:left;margin-right:19px;margin-botton:33px;">
  1. 外边距合并不会发生

5、高度坍塌

高度坍塌根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
解决方法：清除浮动，涉及css属性：clear
-默认值：none
-left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
-right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
-both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

.clearfix{
    clear:both;
}

浮动练习

1、movie.html

<!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>正在热映--猫眼电影</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/movie.css">
    <link rel="stylesheet" href="css/common.css">

</head>
<body>
    <div class="main">
        <!-- 菜单 -->
        <nav class="nav">
        <nav>
        <a href="">正在上映</a>
        <a href="">即将上映</a>
        <a href=""  class="select">经典影片</a>
    </nav>
</nav>
<div class="container">
    <div class="choose-area">
        <div class="choose-item  clearfix">
            <div class="left">类型：</div>
            <div class="right">
             <!-- ul>li*20>a>lorem1 -->
                <ul>
                    <li class="select"><a href="" >Lorem.</a></li>
                    <li><a href="">Minima!</a></li>
                    <li><a href="">Nesciunt?</a></li>
                    <li><a href="">A.</a></li>
                    <li><a href="">Dolore?</a></li>
                    <li><a href="">Aliquam.</a></li>
                    <li><a href="">Omnis!</a></li>
                    <li><a href="">Nisi!</a></li>
                    <li><a href="">Facere.</a></li>
                    <li><a href="">Quibusdam.</a></li>
                    <li><a href="">Repudiandae?</a></li>
                    <li><a href="">A!</a></li>
                    <li><a href="">Alias!</a></li>
                    <li><a href="">Illo.</a></li>
                    <li><a href="">Ab!</a></li>
                    <li><a href="">Sunt.</a></li>
                    <li><a href="">Dolorem.</a></li>
                    <li><a href="">Recusandae?</a></li>
                    <li><a href="">Voluptatem!</a></li>
                    <li><a href="">Hic?</a></li>
                </ul>
            </div>
        </div>
        <div class="choose-item clearfix">
            <div class="left">地区：</div>
            <div class="right">           <!-- ul>li*20>a>lorem1 -->
                <ul>
                    <li><a href="">Lorem.</a></li>
                    <li><a href="">Minima!</a></li>
                    <li><a href="">Nesciunt?</a></li>
                    <li><a href="">A.</a></li>
                    <li><a href="">Dolore?</a></li>
                    <li><a href="">Aliquam.</a></li>
                    <li><a href="">Omnis!</a></li>
                    <li><a href="">Nisi!</a></li>
                    <li><a href="">Facere.</a></li>
                    <li><a href="">Quibusdam.</a></li>
                    <li><a href="">Repudiandae?</a></li>
                    <li><a href="">A!</a></li>
                    <li><a href="">Alias!</a></li>
                    <li><a href="">Illo.</a></li>
                    <li><a href="">Ab!</a></li>
                    <li><a href="">Sunt.</a></li>
                    <li><a href="">Dolorem.</a></li>
                    <li><a href="">Recusandae?</a></li>
                    <li><a href="">Voluptatem!</a></li>
                    <li><a href="">Hic?</a></li>
                </ul>
        </div>
        <div class="choose-item clearfix no-line"> 
            <div class="left">年代：</div>
            <div class="right"> 
                       <!-- ul>li*20>a>lorem1 -->
                       <ul>
                        <li><a href="">Lorem.</a></li>
                        <li><a href="">Minima!</a></li>
                        <li><a href="">Nesciunt?</a></li>
                        <li><a href="">A.</a></li>
                        <li><a href="">Dolore?</a></li>
                        <li><a href="">Aliquam.</a></li>
                        <li><a href="">Omnis!</a></li>
                        <li><a href="">Nisi!</a></li>
                        <li><a href="">Facere.</a></li>
                        <li><a href="">Quibusdam.</a></li>
                        <li><a href="">Repudiandae?</a></li>
                        <li><a href="">A!</a></li>
                        <li><a href="">Alias!</a></li>
                        <li><a href="">Illo.</a></li>
                        <li><a href="">Ab!</a></li>
                        <li><a href="">Sunt.</a></li>
                        <li><a href="">Dolorem.</a></li>
                        <li><a href="">Recusandae?</a></li>
                        <li><a href="">Voluptatem!</a></li>
                        <li><a href="">Hic?</a></li>
                    </ul>
    </div>
 </div>
</div>

</div>
<div class="movies">
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">断桥</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>
    <div class="movie-item">
        <div class="poster"><a href=""><img src="./img/test1.jpg" alt=""></a></div>
        <div class="name"><a href="">电影名字123</a></div>
        <div class="score">9.4</div>
    </div>

<div class="movie-item">
    <!-- div.movie-item*30>(div.poster>a>img[src="./img/test1.jpg"])+(div.name>a>{电影名字})+(div.score>{9.4}) -->
    <div class="poster">
        <a href="">
            <img src="./img/test1.jpg" alt="">
        </a>
    </div>
    <div class="name">
        <a href="">
            断桥
        </a>
    </div>
    <div  class="score">
        9.4
    </div>
</div>
</div>
<div class="pager">
    <a href="">
        上一页
    </a>
    <a href="" class="select">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a>
    <a href="">
        下一页
    </a>
</div>
</div>

</div>
</body>
</html>

2、movie.css

body{
    color:#333;
}
.clearfix::after{
    content:"";
    display:block;
    clear:both;
}
.main{
    line-height: 1.5;
}
.main .nav{
    height:60px;
    background-color: #47464a;
    color:#999;
    text-align: center;
    line-height: 60px;
}
.mian .nav a{
    margin:0 38px;
}
.main .nav a:hover{
    color:#fff;
}
.main .nav a.select{
    color:#ef4238;
}
.main .container{
    width:1120px;
    margin:0 auto;
}
.main .container .choose-area{
    border:1px solid #e5e5e5;
    margin:40px 0;
    font-size:14px;
    line-height:30px;
    padding:0 30px;
}
.main .container .choose-area .choose-item{
    margin:1em 0;
    border-bottom:1px dotted #e5e5e5 ;
}
.main .container .choose-area .choose-item.no-line{
    border:none;
}
.main .container .choose-area .choose-item .left{
   float:left;
    /* width:60px;
    text-align: right; */
    color:#999;
}
.main .container .choose-area .choose-item .right{
  float:left;
  width:1000px;
}
.main .container .choose-area .choose-item .right li{
    float:left;
    margin:0 9px;
    padding:0 6px;
}
.main .container .choose-area .choose-item .right li:hover{
    color:#ef4238;
}
.main .container .choose-area .choose-item .right li.select{
    background: #ef4238;
    color:#fff;
    /* css圆角边框 */
    border-radius: 15px;
}
.main .container .movies .movie-item{
    float:left;
    width:160px;
  
    margin:10px 28px 10px 0;
}
/* 伪类选择器 */
.main .container .movies .movie-item:nth-child(6n){
    margin-right:0;
}
.main .container .movies .movie-item .poster img{
    width:160px;
    height:220px;
}
.main .container .movies .movie-item .name{
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    padding:0 2px;
    text-align: center;
}
.main .container .movies .movie-item .score{
    color:#ffb400;
    text-align: center;
    line-height:2.5;
    font-style:italic;

}
.main .container .movies .movie-item .score::first-letter{
    font-size: 1.5em;
}

3、common.css

/* 多页面的公共样式 */
.pager{
    margin:2em 0;
    text-align: center;
    
}
.pager a{
    border:1px solid #d8d8d8;
    padding:5px 10px;
    margin:0 2px;
}
.pager a:hover{
    border-color:#ef4238;

}
.pager a.select{
    background:#ef4238;
    color:#fff;
    border:none;
}

4、reset.css

/*通用的  */
h1{
    font-size:1em;
    font-weight:normal;
}

ol,
ul{
    list-style:none;
}
blockquote,
q{
    quotes:none;
}
blockquote:before,
blockquote:after,
q::before,
q::after{
    content:'';
    content:none;
}

table{
    border-collapse: collapse;
    border-spacing: 0;

}
a{
    text-decoration:none ;
    color:inherit;
}

5、效果

在这里插入图片描述
http://127.0.0.1:5500/CSS/12.%E6%B5%AE%E5%8A%A8/movie.html

实力比头发更重要
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈CSS浮动的特性
09-24
CSS浮动是网页布局中一种常见的技术，主要用于创建文字环绕效果或者多列布局。浮动特性主要体现在以下几个方面： 1. **盖不住的文本**：当一个元素浮动后，它不会覆盖其后的文本内容，而是文本会自动围绕这个浮动...
css浮动，左右浮动和去除浮动
11-12
浮动f
浅谈CSS浮动的那点事儿
09-24
CSS浮动是网页布局中一种常见的技术，主要用于创建多列布局或者让元素在页面上相互环绕。浮动的概念源自于印刷设计，被引入到Web设计中来更好地控制元素的排列。本文将详细探讨CSS浮动的一些关键点。 首先，我们...
css浮动 float属性详解
11-21
【CSS浮动(float属性)详解】 一、浮动的概念 浮动（float）是CSS布局中的一个重要概念，它使得元素能够脱离正常文档流，向左或向右移动，直至其边框接触到包含框或另一个浮动元素的边框。这个特性最初设计是为了...
CSS 关于浮动
09-25
浮动是CSS布局中的一种关键技术，尤其在传统的网页设计中占据重要地位。它的主要作用是让元素在页面上脱离正常文档流并沿着特定方向移动，从而实现文本环绕效果或其他复杂的布局结构。这一概念起源于印刷设计，其中...
从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）
Hanbuhuic的博客
09-04 1624
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它定义了网页的结构和内容，但不包括样式和行为。HTML 由一系列的元素组成，这些元素可以被浏览器识别并渲染成可视化的网页。CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档的样式表语言。它能够控制网页的布局、颜色、字体以及其他视觉和版式特性。CSS 允许开发者将页面的内容（HTML）与页面的表现（CSS）分离，这样可以更灵活地进行设计和维护。
css之雪碧图（精灵图）
qq_55961367的博客
09-02 712
雪碧图（Sprite）是一种在Web开发中常用的图像合并技术，将多个小图标或图片合并成一张大图，然后通过CSS来显示其不同部分。这种技术可以减少HTTP请求数量，提高网页加载速度。如果一张大图由许多小图构成，那么每张小图都需要进行网络请求，这样一来就会有很多请求，为了减少网络请求，雪碧图就出现了。听到雪碧图是不是跟我一样，啥？以下是本人自己写的例子，大图的图片是在百度找的。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 3631
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
网站开发：HTML + CSS - CSS选择器
qq_51222843的博客
09-03 1365
CSS（Cascading Style Sheets，层叠样式表）是一种用于控制 HTML 文档样式和布局的语言。它为 Web 页面提供了许多功能，使开发者能够创建美观且功能丰富的用户界面。提供了丰富的功能来控制网页的外观和布局，增强用户体验，并支持现代 Web 开发的最佳实践。通过合理使用 CSS，可以创建视觉上引人入胜、功能丰富、易于维护的 Web 应用。
水平垂直居中的方式
qq_64000756的博客
09-03 409
父元素设置position:relative;子元素设置position:absolute;(最后移动自身的50%)transform:translate(-50%,-50%);父元素设置display:flex;2、flex弹性布局。
前端基础面试题·第二篇——CSS（其一）
2301_76380626的博客
09-05 1189
普通流就是指格式化上下文，在普通流中，元素按照先后位置从上至下排列，在这个过程中，行内元素水平排列，直到当行被占满，则换行，块级元素则会被渲染到新的行，除非设置display: inline-block;bfc称为块级作用域上下文，是web页面中css渲染的一部分，是块级元素布局过程发生的区域，也是浮动元素与其他元素交互区域，bfc是一个独立的布局区域，与外部互不影响，用于决定块级元素的布局和浮动相互影响的一个区域。伪元素： ::before ::after ::first-line。
tailwindcss在vue2中安装配置流程
Zeng的博客
09-03 681
【代码】tailwindcss在vue2中安装配置流程。
CSS学习14[重点]--定位、边偏移、定位模式
最新发布
qq_54641174的博客
09-06 1840
CSS定位
扑捉一只耿鬼（HTML文件）
每一次跌倒都是为了华丽的站起来。
08-28 1904
捕捉一只耿鬼
HTML/CSS/JS学习笔记 Day2（HTML--网页标签 上）
给bug两拳的博客
09-06 1365
C2 网页开发的标签：2.1 基础标签的含义（文档类型声明 / 语种 / 字符集标签）、2.2 语义标签（标题 / 段落 / 换行 / 文本格式化 / 无语义 / 图像标签 属性 & 路径）
CSS - 搜索框小动效
一个处女座的CV工程师
09-03 489
CSS 搜索框小动效
CSS英文换行
m0_56164131的博客
09-04 376
在CSS中，如果你想让英文单词换行，可以使用属性。这个属性会强制浏览器在任何字符之间进行换行，即使没有空格或其他分隔符。
深入CSS 布局——WEB开发系列29
一条晒干的咸鱼的博客
09-04 1733
CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 1246
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
CSS浮动清除方法及实例详解
本文详细探讨了CSS中清除浮动的重要性及其方法。...理解和掌握CSS浮动的原理、特点以及清除方法对于编写可维护的响应式网页布局至关重要。通过实例演示和技巧，读者能够更好地应对实际开发中可能出现的布局问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值