css浮动

最新推荐文章于 2022-11-15 16:19:16 发布
最新推荐文章于 2022-11-15 16:19:16 发布
阅读量125 收藏
点赞数
分类专栏： css 前端 html 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/no_name_sky/article/details/118022649
版权
前端 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
css
7 篇文章 0 订阅
订阅专栏
html
5 篇文章 0 订阅
订阅专栏

浮动的介绍

指的是一个元素脱离文档流，悬浮在父元素之上的现象。
网页的制作，是一个“流”从上而下，编织每一个标签的(和织毛衣一样，从上到下)，不能像PS设计软件，想在哪里画就在哪里画。
文档流的一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>

    <style>
        *{
            padding:0;
            margin:0;
        }
        .box1{
            width:300px;
            height:300px;
            background-color:red;
        }
        .box2{
            width:400px;
            height:400px;
            background-color:green;
        }
    </style>
</head>
<body>
<div class="box1">

</div>
<div class="box2">

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

样式：
有两个div标签，div标签是块级标签，各自独占一行，先编织box1再编织box2,按文档流展示。
在这里插入图片描述
脱离文档流的例子：
想让box1 box2 在一行展示，但是又是块级标签，块级标签又是独占一行的。想让块级标签在一行显示，把块级标签变成行内标签不就行了嘛，再设置padding和margin，让两个标签显示在一行上，这个方式在一行显示内容较多的网页上略显繁琐。有更简单的方式，就是使用浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>

    <style>
        *{
            padding:0;
            margin:0;
        }
        .box1{
            width:300px;
            height:300px;
            background-color:red;
            float:left;
        }
        .box2{
            width:400px;
            height:400px;
            background-color:green;
            float:left;
        }
    </style>
</head>
<body>
<!--
    css中布局最多的一个属性。
    效果：两个元素并排显示，并且两个元素都能设置宽度和高度。
    三个特性：
        1.浮动元素脱标
        2.浮动的元素互相贴靠
        3.浮动的元素有“字围”效果
        4.紧凑效果
-->
<div class="box1">

</div>
<div class="box2">

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

样式：
在这里插入图片描述

浮动元素脱标

div盒子演示浮动脱标：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>

    <style>
        *{
            padding:0;
            margin:0;
        }
        .box1{
            width:300px;
            height:300px;
            background-color:red;
            float:left;
        }
        .box2{
            width:400px;
            height:400px;
            background-color:green;
        }
    </style>
</head>
<body>
<!--
脱标：就是脱离了标准文档流。
小红盒子浮动了，脱离了标准流，此时小绿这个盒子就是标准文档流中的第一个盒子，所以就渲染到了左上方。
-->
<div class="box1">
小红
</div>
<div class="box2">
小绿
</div>
</body>
</html>

样式：
在这里插入图片描述
span标签脱标：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>

    <style>
        *{
            padding:0;
            margin:0;
        }
        .box1{
            width:300px;
            height:300px;
            background-color:red;
            float:left;
        }
        .box2{
            width:400px;
            height:400px;
            background-color:green;
        }
        span{
            background-color:yellow;
            float:left;
            width:150px;
            height:30px;
        }
    </style>
</head>
<body>
<!--
脱标：就是脱离了标准文档流。
小红盒子浮动了，脱离了标准流，此时小绿这个盒子就是标准文档流中的第一个盒子，所以就渲染到了左上方。
-->
<div class="box1">
小红
</div>
<div class="box2">
小绿
</div>
<!--span标签不许需要转成块级元素也能设置宽高
    所有的标签一旦设置浮动，能够并排，都不区分行内和块级元素，能设置宽高。
-->
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

样式：
在这里插入图片描述

浮动的元素互相贴靠

如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥紧靠着边。
如果没有足够的空间，那么就靠着3哥靠着1哥。如果一个的边不够长就自己继续往边上靠。
父元素空间足够，三兄弟互相贴靠：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>

    <style>
        *{
            padding:0;
            margin:0;
        }
        .box1{
            width:100px;
            height:200px;
            background-color:red;
            float:left;
        }
        .box2{
            width:200px;
            height:300px;
            background-color:green;
            float:left;
        }
        .box3{
            width:300px;
            height:400px;
            background-color:yellow;
            float:left;
        }
    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

样式：
在这里插入图片描述
浏览器缩小，即父级元素不够时，1哥的边不够长时：
在这里插入图片描述
浏览器缩小，1哥的边够长时：
在这里插入图片描述
浮动肯定会贴靠，谁贴着谁，靠哪个边得看父级的宽度。

浮动的元素有“字围”效果

字符效果：当div浮动，p不浮动。div挡住了p，但是p中的文字不会被遮盖，形成字围效果。
当不设置浮动是div标签和p标签都是独占一行的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>

    <style>
        *{
            padding:0;
            margin:0;
        }
        .box1{
            width:100px;
            height:100px;
            background-color:red;
            
        }
    </style>
</head>
<body>
<div class="box1">1</div>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容
</p>
</body>
</html>

在这里插入图片描述
当给div标签设置浮动时，出现了字围效果,p标签变成了第一个文档流渲染的标签，但是文字没有被div浮动覆盖，而是形成了字围：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>

    <style>
        *{
            padding:0;
            margin:0;
        }
        .box1{
            width:100px;
            height:100px;
            background-color:red;
            float:left;
        }
        p{
            background-color:#666;
        }
    </style>
</head>
<body>
<div class="box1">1</div>
<p>我是内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容
</p>
</body>
</html>

样式：
在这里插入图片描述

紧凑效果

不给浮动的元素设置宽和高，就会自动收缩为文字的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>

    <style>
        *{
            padding:0;
            margin:0;
        }
        .box1{
            background-color:red;
            float:left;
        }
    </style>
</head>
<body>
<div class="box1">1234</div>
</body>
</html>

样式：
在这里插入图片描述

浮动带来的问题

小技巧：子元素浮动，父盒子一般不设置高度，让父盒子的高度随子元素内容高度进行变化。如果给父盒子设置高度，子元素的高度在修改时可能会超出父盒子的高度，导致布局变乱。如果想布局不变乱就要给对应的父盒子设定适当的高度，这个操作相当的繁琐。
不给父盒子设置高度的例子
在布局时，父盒子不设置高度，子元素全部浮动，相当于父盒子在文档流中的高度是没有的，在设置和父盒子的同级盒子b时，就会出浮动的盒子“浮在了”盒子b上面，导致布局紊乱。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width:1126px;
        }
        .father .box1{
            width:200px;
            height:500px;
            float:left;
            background-color:red;
        }
        .father .box2{
            width:300px;
            height:200px;
            float:left;
            background-color:yellow;
        }
        .father .box3{
            width:400px;
            height:300px;
            float:left;
            background-color:green;
        }
        .father2{
            width:1126px;
            height:500px;
            background-color:blue;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

<div class="father2"></div>
</body>
</html>

样式：
在这里插入图片描述
出现这种问题，我们要清楚浮动带来的影响。

清除浮动

给父盒子设置高度

给父盒子设置高度的方式不灵活。很少使用。
相当于浮动起来的那部分高度在标准文档流中占位。

clear:both 内墙法

给浮动元素的最后面加一个空的div，并且该div部浮动，然后设置clear:both(意思时清除别人对我的浮动影响);
问题是，无缘无故增加了div元素，结构冗余。不可能每一个浮动最后面都加一个div来清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width:1126px;
        }
        .father .box1{
            width:200px;
            height:500px;
            float:left;
            background-color:red;
        }
        .father .box2{
            width:300px;
            height:200px;
            float:left;
            background-color:yellow;
        }
        .father .box3{
            width:400px;
            height:300px;
            float:left;
            background-color:green;
        }
        .father2{
            width:1126px;
            height:500px;
            background-color:blue;
        }
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
<!--    在浮动的最后一个元素后面加div并设置clear:both-->
    <div class="clear"></div>
</div>

<div class="father2"></div>
</body>
</html>

样式：
在这里插入图片描述

伪元素清除浮动（常用）

在父盒子添加class值clearfix并设置样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width:1126px;
        }
        .father .box1{
            width:200px;
            height:500px;
            float:left;
            background-color:red;
        }
        .father .box2{
            width:300px;
            height:200px;
            float:left;
            background-color:yellow;
        }
        .father .box3{
            width:400px;
            height:300px;
            float:left;
            background-color:green;
        }
        .father2{
            width:1126px;
            height:500px;
            background-color:blue;
        }
        .clearfix:after{
        /* 必须写这三句*/
            content:"";
            clear:both;
            display:block;
        }
    </style>
</head>
<body>
<div class="father clearfix">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

<div class="father2"></div>
</body>
</html>

overflow:hidden (常用)

给父盒子添加属性overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width:1126px;
            /*内容会被修剪，并且其余内容是不可见的*/
            overflow:hidden;
        }
        .father .box1{
            width:200px;
            height:500px;
            float:left;
            background-color:red;
        }
        .father .box2{
            width:300px;
            height:200px;
            float:left;
            background-color:yellow;
        }
        .father .box3{
            width:400px;
            height:300px;
            float:left;
            background-color:green;
        }
        .father2{
            width:1126px;
            height:500px;
            background-color:blue;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

<div class="father2"></div>
</body>
</html>
no_name_sky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML-div盒子模型
主营前端方向，技术栈是vue
11-09 4577
div盒子模型(边框的border-width宽度，border-color颜色，border-style样式，上右下左四个边框以及简写、内联元素盒子)
HTML,CSS进阶知识（盒子模型）
最新发布
m0_61213423的博客
11-23 389
文档流文档流（normal flow）网页是一个多层的结构，css可以给每一层设置样式，最终我们看到是最上面的一层。文档流是网页最底下的那一层元素分为两种状态：在文档流中，脱离文档流之前将元素分为三类，块元素、行内元素、行内块元素分别具有一些特点，这些特点都是元素在文档流中的特点块元素：不会独占一行，宽是父元素内容区宽度，高是被内容撑开行内元素；
CSS浮动float父div没有高度的问题
JeamKing的专栏
03-29 7620
<br />如下所示，子元素 div2 本身具有高度和宽度，但由于其具有float:left；属性后。其父元素 div1 不具有高度。<br /><html><br />     <head><br />     </head><br />     <body><br />         <div id="div1"><br />       
Html第11集：div、span、div 盒子模型
赵彦军
10-09 1567
div、span 是没有语义的。他们就是一个盒子（容器），用来装内容。1、在功能方面：div是一个块级元素，它包含的元素会自动换行。而span是行内元素，在它的前后不会换行。span没有结构上的意义，只是单纯的应用样式，其它元素不适合时，就可以使用span元素。span可以作为div的子元素，但div不能是span的子元素，如果出现span中出现div不符合ws3c的页面标准。
网页入门D4——盒模型布局（DIV+CSS3页面布局）
m0_53156691的博客
01-20 4524
盒模型布局——DIV+CSS3页面布局 勤学勤练方能实现。 为了呈现不同的视觉效果，网页布局往往千变万化。网页布局的基础就是盒模型。如果说网页是一座城堡，那么盒模型就是堆砌城堡的一块块积木。 在网页布局的过程中，要遵循从大到小，从结构到细节的顺序。先搭好框架再往里面填充内容和细节。框架搭的好，城堡才稳固。
浅谈CSS浮动的特性
09-24
CSS浮动是网页布局中一种常见的技术，主要用于创建文字环绕效果或者多列布局。浮动特性主要体现在以下几个方面： 1. **盖不住的文本**：当一个元素浮动后，它不会覆盖其后的文本内容，而是文本会自动围绕这个浮动...
css浮动，左右浮动和去除浮动
11-12
浮动f
CSS 关于浮动
09-25
浮动是CSS布局中的一种关键技术，尤其在传统的网页设计中占据重要地位。它的主要作用是让元素在页面上脱离正常文档流并沿着特定方向移动，从而实现文本环绕效果或其他复杂的布局结构。这一概念起源于印刷设计，其中...
css 浮动 理解Float的含义
09-25
css实例教程 理解Float的含义.
理解CSS浮动float、定位position
09-27
浮动(float)和定位(position)是CSS布局中的两个关键概念，它们在网页设计中扮演着重要角色，用于控制元素的位置和排列方式。 一、浮动(float) 浮动最初设计的目的是为了实现文本环绕图片的效果，但后来发展成为一种...
6、div盒子模型
qq_48773808的博客
08-16 982
一、盒子模型 1、模型图 Content：盒子里面的内容； Border：盒子的边框； Padding：内容与边框的距离； Margin：盒子与盒子之间的距离。 2、<div>标签的快捷操作 3、<div>标签各个属性的用法 width、height width、height表示内容的宽高，不是盒子的宽高；所以要留心盒子的尺寸，及时做出修改。 盒子的宽度：width + padding左右 + border左右； 盒子的高度：height + padding上下 + border
HTML的“小盒子”--＜div＞
Wellfancy的博客
04-26 1307
HTML <div> 元素 我们知道，网页的外观都是由一个一个的“小盒子”组成，而这些小盒子，就是<div>元素。 下图中一个个红色的区块，就是所谓的小盒子。 HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 下面用一段代码举例多组d.
HTML 网页制作 盒子设计 CSS
热门推荐
王者生辉的博客
08-07 2万+
制作简单的网页结构以北京大学官网为例： 以下是对应的网页结构及参数 需要用到盒子的知识 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距)- 清除..
【html_盒子模型】div
十二_的博客
11-15 556
努力是为了不平庸~算法学习有些时候是枯燥的，这一次，让我们先人一步，趣学算法！欢迎记录下你的那些努力时刻（算法学习知识点/算法题解/遇到的算法bug/等等），在分享的同时加深对于算法的理解，同时吸收他人的奇思妙想，一起见证技术er的成长~
制作简单的div盒子
chenqiuqian的博客
09-19 3538
先放3个div，里面可以写一些文字 在浏览器中呈现出来就是这个样子的（看下图） 然后开始给这三个div盒子写样式，在head尾部写style上标签，在style标签内写CSS样式，可以用通配符去掉浏览器自带的内边距和外边距，然后用标签选择器给三个盒子写样式，我的写的是宽为200像素、高为200像素、背景为黑色、字体为白色的盒子样式 在浏览器中呈现出来就是这个样子的（看下图） 因为标签选择器会选择到所有的div标签，如果要给每个div写不同的样式，可以给每个标签写上不.
HTML中盒子的做法
weixin_65905274的博客
03-02 2795
width是盒子模型的宽度； height是盒子模型的高度； border是盒子模型的边框； background是盒子模型的背景颜色； padding是盒子模型的内边距； margin是盒子模型的外边距； div标记是一个区块容器标记，将页面分割为独立的、不同的部分。 border-style是边框样式，none是无、solid是单实线、dashed是虚线、dotted是点线、double是双实线。样式属性border-style ：上边{右边 下边 左边}。 border-width是边
html创建盒子,HTML 盒子
weixin_42327743的博客
06-20 4031
盒子模型CSS 在处理网页的时候会认为每个元素都是一个盒子，一个盒子分为以下几个部分：1、内容区：content2、内边距：padding3、边框 ：border4、外边距：margin图片1.png内容区内容区指的是盒子中放置内容的区域，也就是元素的文本内容，子元素也是存在于内容区的， 可以通过width和height两个属性设置内容区的大小但是，width和height属性只适用于块元素...
探讨CSS中元素浮动后，文字环绕于浮动元素周围，没有与浮动元素重合的问题
默默前行，勿喜、勿悲、一切随缘！
07-15 4104
问题 浮动 div{ width:100px; height:100px; } #box1{ background-color:red; } #box2{ background-color:green; float:left; } #box3{ background-color:yel
DIVCSS布局：CSS浮动float属性详解.doc
01-08
"此文档详细介绍了CSS浮动属性float在DIVCSS布局中的应用，包括float属性的基本概念、可用值以及实例分析，旨在帮助理解如何利用float进行网页布局和元素排列。" 在网页设计中，CSS（层叠样式表）的float属性扮演着...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值