（12）css—float浮动样式

最新推荐文章于 2024-05-05 20:21:31 发布
最新推荐文章于 2024-05-05 20:21:31 发布
阅读量233 收藏
点赞数 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
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【27】CSS核心样式（6）——浮动属性（上）
倏存的博客
04-05 2856
• 浮动定义 • 浮动的性质
CSS之float样式
weixin_30655219的博客
02-08 395
一、简介 　　Css样式的float浮动属性，用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、标签等html标签）的<em>浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。 　　Float常跟属性值left、right、none　　Float:none 不使...
CSS中的Float（浮动）
GZM888888的博客
05-05 957
Float是CSS中的一种布局方式，它允许元素脱离正常的文档流，并向左或向右浮动。Float属性最初是为了实现文字环绕图片的效果而设计的，但现在已经被广泛应用于网页布局中。
关于float样式
weixin_34402408的博客
03-23 106
在认识float样式之前务必要认识position:absolute position:absolute 功能是:当前节点脱离文档流,对于其兄弟节点(即同一父节点下的节点)已经感觉不到他的存在(即他的位置已经被其兄弟结点占用了,即使他里面还有内容也不给腾位置，他就只能漂浮着)。他可以漂浮在其父节点所覆盖的区域的任何地方的上方。 而float的功能与position:absolute的功能是类...
CSS之样式属性float
qq_51492065的博客
06-04 5041
那么废话不多说，让我们的主角闪亮登场，众所周知，样式属性float可以让元素产生“浮动”的效果，它可以左浮动，当然还可以右浮动以及不浮动。那么，现在问题来了，我们希望容器可以随qi'ne ...
float样式
weixin_30457465的博客
05-22 86
<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浮动属性的深入研究及详解拓展(二)
12-11
接上回…css float浮动属性的深入研究及详解拓展(一) 五、浮动的非本职工作 浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示，而其他所有用浮动实现的效果都不是浮动应该做的事情，我称之为“非本职工作...
css 浮动(float)页面布局
12-07
下载 (116.12 KB) 2009-6-1 09:22 这样HTML就很容易写出来了 复制代码代码如下: ”Logo”></div> ”Nav”></div> ”Banner”></div> ”Content”></div> ”Footer”></div> 因为这5块的宽度都是900像素，并且都是...
css float 解析学习
01-21
什么是CSS Float？ 定义: float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级元素，而不论它本身是何种元素。元素...
css float浮动属性的深入研究及详解拓展(一)
12-02
个人感悟之CSS代码的情感化思维 个人观点之浮动的意义仅仅是文字环绕显示而已 个人观点之浮动的本质是“包裹及破坏” 个人观点之目前大多数浮动应用都不是浮动应该做的 个人观点之浮动其实是个魔鬼、混球 一、...
css浮动(float/clear)使用讲解
01-21
本文以div元素布局为例。教程开始： 首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。...例如，假设上图中的div2浮动，那么它将脱离标准流，但div1、div3、div4仍然在
CSS-float样式属性
paku-san的博客
05-20 1133
文章目录问题解决方法：使用float样式属性取消浮动的两种方法1. 在div内添加取消浮动的代码2. 使用伪类after 问题 在写浏览器会将换行代码之间多个空格解释为一个空格，但是这一个空格有时会破坏整个页面布局 比如： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <...
网页CSS样式——float样式属性
CandidBoy的博客
05-21 744
一、float作用 HTML代码编写过程中需要注意代码规范，代码错落有致即是其中最基本的要求，但是浏览器会讲换行代码之间的多个空格解释为一个空格，但是这一个空格有时候会破坏整个页面布局，如何解决呢？通过子元素浮动即可解决。 二、float属性值详述 1、none none：默认值。元素不浮动，并会显示其在文本中出现的位置。 2、left left：元素向左浮动。 示例代码1： &lt...
CSS - 浮动布局（float）
伏城之外的博客
07-20 1万+
标准布局、标准流、标准布局的不足、浮动、浮动流、浮动元素特点、脱标、父容器高度塌陷、清除浮动、clear、额外标签法、::after伪元素法、浮动元素margin负值原理、双飞翼布局、圣杯布局、三栏式布局......
详述float样式属性
IT_Helianthus的博客
05-20 911
一、引例 HTML代码编写过程中需要注意代码规范，代码错落有致即是其中最基本的要求，但是浏览器会将换行代码之间多个空格解释为一个空格，但是这一个空格有时会破坏整个页面布局，如何解决呢？通过子元素浮动即可解决。 示例如下： <html> <head> <meta charset="UTF-8"> <title></title> ...
浮动-cssFloat-styleFloat
Less is More
06-24 97
[code="javascript"] //w3c el.style.cssFloat = "left"; //IE el.style.styleFloat = "left"; [/code] 都是float这个保留关键字导致的。className不能是class也是因为这个。
浮动及常见样式
weixin_51264427的博客
07-29 125
目录 浮动的使用 清除浮动影响 伪元素 设置颜色 颜色 透明度 背景图 浮动的使用 float元素 可以让块属性元素排成一行 浮动会让行属性元素支持设置宽高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &l...
CSS float 浮动属性详解
Dandan的前端开发---专注于div css js jquery
03-19 2652
什么是 CSS float ？ float 是 CSS 的定位属性。在传统的印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。 在网页设计中，应用了 CSS 的 float 属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本
CSS浮动（float）
热门推荐
屈帅波的技术博客
05-26 1万+
一 传统网页布局的三种方式 网页布局的本质：用 CSS 来摆放盒子，把盒子摆放到相应位置。 CSS 提供了三种传统布局方式（简单说就是盒子如何进行排列）。 普通流（标准流） 浮动 定位 这里指的只是传统布局，其实还有一些特殊高级的布局方式。 二 标准流（普通流/文档流） 所谓的标准流：就是标签按照规定好的默认方式排列。 块级元素会独占一行，从上向下顺序排列。 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式
css清除浮动内联样式
最新发布
06-22
在 CSS 中，清除浮动（clearing floats）通常用于处理由内联元素或浮动元素产生的布局问题。浮动元素会脱离文档流，影响到其他元素的排列。以下是一些清除浮动的方法： 1. **`clear` 属性**：直接在需要清除浮动的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

泽哥ins

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

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

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

打赏作者

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

抵扣说明：

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

余额充值