（12）css—float浮动样式

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

 一、什么是浮动？

浮动是一种非常重要的布局属性。 属性名：float，漂流、浮动的意思。

属性值：left 左浮动 right 右浮动

作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。 

二、测试案例（没有加float浮动属性的结果）

<!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>css-float浮动样式</title>   
    <style>
        .box {
            width: 1000px;
            height: 100px;
            background-color: #00f;
        }
        .box p {
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }
    </style>
</head> 
<body>
  <div class="box">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
  </div>
</body>
</html>

 三、测试案例（加了float浮动属性的结果）

<!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>css-float浮动样式</title>   
    <style>
        body,div,p {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 1000px;
            height: 100px;
            background-color: #00f;
        }
        .box p {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 10px;
            background-color: #ccc;
        }
    </style>
</head> 
<body>
  <div class="box">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
  </div>
</body>
</html>

 四、测试案例（将float的属性值改为right的结果）

五、浮动的元素脱离标准流

标准文档流特点：区分行块。

块级元素：可以设置宽高，必须独占一行。

行内元素：不能设置宽高，可以并排一行。

浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开。

六、浮动的元素依次贴边

浮动属性值：left、right（左浮动和右浮动）

浮动方向设置不同，进行布局时，加载位置方向不同。

以 left 为例： 父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素 左边←子元素1←子元素2← 子元素3←子元素4。

6.1浮动前

<!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>css浮动</title>
    <style>
        body,div,p {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 1000px;
            height: 200px;
            background-color: #000;
        }
        .box p {
            /* float: left; */
            width: 250px;
            height: 200px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
</body>
</html>

 6.2浮动后（显示在一行，并且没有空白折叠现象）

6.3当父元素宽度不够

父元素宽度如果不够，例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续 跳过子元素2向前面的子元素1进行贴边。

<!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>css浮动</title>
    <style>
        body,div,p {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 1000px;
            height: 400px;
            background-color: #ccc;
        }
        .box p {
            width: 250px;
            float: left;
        }
        .box .p1 {
            height: 300px;
            background-color: #f00;
        }
        .box .p2 {
            height: 150px;
            background-color: #0f0;
        }
        .box .p3 {
            height: 100px;
            background-color: #00f;
        }
        .box .p4 {
            width: 251px;
            height: 100px;
            background-color: #ff0;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="p1">1</p>
        <p class="p2">2</p>
        <p class="p3">3</p>
        <p class="p4">4</p>
    </div>
</body>
</html>

盒子4越过了盒子3，贴在了盒子2上 

 6.3当父元素宽度不够

如果子元素4在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子 元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过 子元素2向子元素1进行贴边。

<style>
.box .p2 {
            height: 100px;
            background-color: #0f0;
        }

</style>

盒子4越过了盒子3和2，贴在了盒子1上

 6.4当父元素宽度不够

如果贴边的这个子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3， 形成一个凹陷，子元素4会受前面子元素3高度影响，不会出现钻空现象

<style>
.box .p4 {
            width: 301px;
            height: 100px;
            background-color: #ff0;
        }

</style>

6.5当父元素宽度不够

如果子元素1后面的距离也放不下子元素4，子元素4最终会贴到父元素左边，如果子元素4的宽度超过了父元素，只会出现溢出现象。 

<!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>css浮动</title>
    <style>
        body,div,p {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 800px;
            height: 400px;
            background-color: #ccc;
        }
        .box p {
            width: 250px;
            float: left;
        }
        .box .p1 {
            height: 100px;
            background-color: #f00;
        }
        .box .p2 {
            width: 200px;
            height: 100px;
            background-color: #0f0;
        }
        .box .p3 {
            height: 100px;
            background-color: #00f;
        }
        .box .p4 {
            width: 900px;
            height: 100px;
            background-color: #ff0;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="p1">1</p>
        <p class="p2">2</p>
        <p class="p3">3</p>
        <p class="p4">4</p>
    </div>
</body>
</html>

6.6当父元素宽度不够

右浮动与左浮动贴边效果是一致的，只是贴边方向不同。按照 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>css浮动</title>
    <style>
        body,div,p {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 1000px;
            height: 400px;
            background-color: #ccc;
        }
        .box p {
            width: 250px;
            float: right;
        }
        .box .p1 {
            height: 100px;
            background-color: #f00;
        }
        .box .p2 {
            height: 200px;
            background-color: #0f0;
        }
        .box .p3 {
            height: 100px;
            background-color: #00f;
        }
        .box .p4 {
            width: 251px;
            height: 100px;
            background-color: #ff0;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="p1">1</p>
        <p class="p2">2</p>
        <p class="p3">3</p>
        <p class="p4">4</p>
    </div>
</body>
</html>

七、浮动demo练习

案例：利用浮动依次贴边的性质，用列表结构模拟平均分布的表格布局结构。 

制作方法：<ul> 内部嵌套的 <li> 标签全部浮动，宽高设置相同，边框可以利用标 签之间的间距和背景颜色的差异进行制作。

<!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>浮动demo练习</title>
    <style>
        body,ul,li {
            margin: 0;
            padding: 0;
        }
        ul {
            width: 808px;
            height: 156px;
         /* padding-top: 2px;
            padding-left: 2px; */
            padding: 2px 0 0 2px;
            background-color: #aaa;
            list-style: none;
        }
        ul li {
            float: left;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
         /* margin-right:2px;
            margin-bottom:2px; */
            margin: 0 2px 2px 0;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
</body>
</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>浮动demo练习</title>
    <style>
        body,ul,li {
            margin: 0;
            padding: 0;
        }
        ul {
            width: 1008px;
            height: 156px;
            padding: 2px 0 0 2px;
            background-color: #aaa;
            list-style: none;
        }
        ul li {
            float: left;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin: 0 2px 2px 0;
            background-color: skyblue;
        }
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="fr">4</li>
        <li>5</li>
        <li class="fr">6</li>
        <li class="fr">7</li>
        <li>8</li>
        <li class="fr">9</li>
        <li>10</li>
        <li class="fr">11</li>
        <li>12</li>
    </ul>
</body>
</html>

八、贴边性质应用

利用浮动的这个依次贴边性质，可以完成多种网页布局效果。例如：①上述平均分布表格效果。 ②导航栏效果。③常见的电商或企业网站布局。  表结构模拟平均分布的表格布局

 九、浮动的元素没有margin塌陷

margin 塌陷现象出现在标准流中的，浮动元素已经脱离标准流，不再具有 margin 塌陷现象。

9.1示例：margin塌陷现象

一个元素设置了margin-bottom，另外一个元素设置了margin-top，此时如果没有添加浮动，它就会出现margin塌陷现象。

<!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>浮动没有margin塌陷</title>
    <style>
        body,div,p {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 200px;
            height: 400px;
            border: 1px solid #000;
            /* background-color: pink; */
        }
        .p1 {
            /* float: left; */
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 50px;
        }
        .p2 {
            /* float: left; */
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="p1">1</p>
        <p class="p2">2</p>
    </div>
</body>
</html>

9.2示例：margin塌陷现象（使用float浮动解决）

<!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>浮动没有margin塌陷</title>
    <style>
        body,div,p {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 200px;
            height: 400px;
            border: 1px solid #000;
            /* background-color: pink; */
        }
        .p1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 50px;
        }
        .p2 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="p1">1</p>
        <p class="p2">2</p>
    </div>
</body>
</html>

 十、浮动的元素让出标准流位置

元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素。

示例：10.1：没有设置浮动的情况（普通的标准文档流）

 示例：10.2：设置浮动的情况（脱离了标准文档流，让出自己的位置）

 注意：如上示例，我们浮动的元素飘起来了，脱离了标准的文档流，所以p2元素就会占据它的位置，但是，会被浮动的元素层叠再下面，但是字体不会被覆盖掉。

示例：10.3：设置浮动后再IE浏览器7以下的版本兼容问题

如何查看IE浏览器下的兼容问题：

第一步：再vscode编辑器中右键，选择Open In other Browsers 或者使用快捷键shift+alt+B

第二步：再搜索框区域找到IE浏览器，点击打开。

第三步：在浏览器中右键选择检查元素 

 

 第四步：选择仿真，然后切换版本

 注意;由于浏览器中有兼容性问题，不会使用这种属性制作压盖效果，真正的压盖效果使用后期学习的position定位制作。 如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素 中有一个浮动其他的也要浮动。

泽哥ins
关注
专栏目录
【27】CSS核心样式（6）——浮动属性（上）
倏存的博客
04-05 2912
• 浮动定义 • 浮动的性质
CSS之float样式
weixin_30655219的博客
02-08 431
一、简介 　　Css样式的float浮动属性，用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、标签等html标签）的<em>浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。 　　Float常跟属性值left、right、none　　Float:none 不使...
CSS中Float(浮动)详解
最新发布
ning的博客
10-10 727
float属性是CSS布局中的一个重要工具，它允许元素浮动并使文本环绕。通过理解float的工作原理和如何使用它，你可以创建复杂的布局，如图像画廊、侧边栏等。然而，使用float时也要注意清除浮动，以避免布局问题。随着CSS的发展，新的布局技术如Flexbox和Grid也在不断涌现，但float仍然是一个强大的布局选项。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSS Float（浮动） | 菜鸟教程float - CSS：层叠样式表 | MDN。
关于float样式
weixin_34402408的博客
03-23 126
在认识float样式之前务必要认识position:absolute position:absolute 功能是:当前节点脱离文档流,对于其兄弟节点(即同一父节点下的节点)已经感觉不到他的存在(即他的位置已经被其兄弟结点占用了,即使他里面还有内容也不给腾位置，他就只能漂浮着)。他可以漂浮在其父节点所覆盖的区域的任何地方的上方。 而float的功能与position:absolute的功能是类...
CSS之样式属性float
qq_51492065的博客
06-04 5110
那么废话不多说，让我们的主角闪亮登场，众所周知，样式属性float可以让元素产生“浮动”的效果，它可以左浮动，当然还可以右浮动以及不浮动。那么，现在问题来了，我们希望容器可以随qi'ne ...
float样式
weixin_30457465的博客
05-22 98
<head><meta charset="UTF-8"><title>float属性，overflow,z-index属性</title></head><style type="text/css">div{width:200px;height:200px;/*使用float设置控件脱离顺序流。float:left:让控件在左边...
css float浮动属性使用方法和实例讲解
09-01
Css的float浮动属性，用于设置标签对象（如：标签盒子、标签、标签、标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动靠左（float:left）和浮动靠右(float:right)。 float的作用：通过css定义float...
CSS-float浮动和高度塌陷问题详解
主营前端方向，技术栈是vue
11-21 980
float浮动和高度塌陷问题详解(基本属性、环绕、脱离文档流撑开内容，子浮父塌页面混乱，法1开zoom，法2clear:both，最终方案多功能clearfix)
css float浮动属性的深入研究及详解拓展(一)
12-02
个人感悟之CSS代码的情感化思维 个人观点之浮动的意义仅仅是文字环绕显示而已 个人观点之浮动的本质是“包裹及破坏” 个人观点之目前大多数浮动应用都不是浮动应该做的 个人观点之浮动其实是个魔鬼、混球 一、...
【CSS】浮动（float）、清除浮动
m0_50947589的博客
04-14 549
浮动的特性和清除浮动的方法
CSS-float样式属性
paku-san的博客
05-20 1250
文章目录问题解决方法：使用float样式属性取消浮动的两种方法1. 在div内添加取消浮动的代码2. 使用伪类after 问题 在写浏览器会将换行代码之间多个空格解释为一个空格，但是这一个空格有时会破坏整个页面布局 比如： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <...
网页CSS样式——float样式属性
CandidBoy的博客
05-21 851
一、float作用 HTML代码编写过程中需要注意代码规范，代码错落有致即是其中最基本的要求，但是浏览器会讲换行代码之间的多个空格解释为一个空格，但是这一个空格有时候会破坏整个页面布局，如何解决呢？通过子元素浮动即可解决。 二、float属性值详述 1、none none：默认值。元素不浮动，并会显示其在文本中出现的位置。 2、left left：元素向左浮动。 示例代码1： &lt...
CSS - 浮动布局（float）
热门推荐
程序员阿甘的博客
07-20 1万+
标准布局、标准流、标准布局的不足、浮动、浮动流、浮动元素特点、脱标、父容器高度塌陷、清除浮动、clear、额外标签法、::after伪元素法、浮动元素margin负值原理、双飞翼布局、圣杯布局、三栏式布局......
CSS中的Float（浮动）
GZM888888的博客
05-05 2013
Float是CSS中的一种布局方式，它允许元素脱离正常的文档流，并向左或向右浮动。Float属性最初是为了实现文字环绕图片的效果而设计的，但现在已经被广泛应用于网页布局中。
day14-css之float样式
weixin_34090643的博客
12-13 82
一、概述 　　今天说的是这个float样式非常重要，要是不会它，那几乎所有的页面都写不出来，float的意思是浮动的意思，就是让标签都浮动起来，不要受父标签控制，就是脱离了父标签的控制。 二、float样式 2.1、float样式 因为float是在某个父块级标签中浮动起来，但是如果父标签没有的话，则父标签就是整个window窗口。 <!DOCTYPE html> &l...
详述float样式属性
IT_Helianthus的博客
05-20 949
一、引例 HTML代码编写过程中需要注意代码规范，代码错落有致即是其中最基本的要求，但是浏览器会将换行代码之间多个空格解释为一个空格，但是这一个空格有时会破坏整个页面布局，如何解决呢？通过子元素浮动即可解决。 示例如下： <html> <head> <meta charset="UTF-8"> <title></title> ...
CSS浮动（float）是什么、为什么、浮动特性、应用举例
atatsuki的博客
05-12 1606
什么是浮动.left,.right {/* 层叠性 */.right {左青龙
浮动-cssFloat-styleFloat
Less is More
06-24 138
[code="javascript"] //w3c el.style.cssFloat = "left"; //IE el.style.styleFloat = "left"; [/code] 都是float这个保留关键字导致的。className不能是class也是因为这个。
CSS position详解与float浮动深度解析
"CSS的position定位和float浮动详解" 在网页设计和开发中，CSS（Cascading Style Sheets）是用于控制网页元素样式的关键工具。本文将深入探讨CSS中的两个核心概念：position定位和float浮动，它们对于创建复杂的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

泽哥ins

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值