CSS浮动笔记

最新推荐文章于 2024-06-13 10:31:50 发布
最新推荐文章于 2024-06-13 10:31:50 发布
阅读量169 收藏 1
点赞数 2
分类专栏： HTML/CSS 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44066678/article/details/115667972
版权

浮动

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

CSS提供了三种传统布局方式

1、普通流（标准流）

2、浮动

3、定位

普通流

在这里插入图片描述

浮动

在这里插入图片描述

<!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>Document</title>
    <style>
      .left,
      .right {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .left {
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
  </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>Document</title>
    <style>
      /* 设置了浮动(float)的元素会：
        1、脱离标准普通流的控制(浮)移动到指定位置(动)
        2、浮动的盒子不在保留原先的位置。 */
      .box1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;
      }
      .box2 {
        width: 300px;
        height: 300px;
        background-color: rgb(0, 153, 255);
      }
    </style>
  </head>
  <body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
  </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>Document</title>
    <style>
      div {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .two {
        background-color: purple;
      }
      .four {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <div class="two">2</div>
    <div>3</div>
    <div class="four">4</div>
  </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>Document</title>
    <style>
      /* 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性 */
      span,
      div {
        float: left;
        width: 200px;
        height: 100px;
        background-color: pink;
      }
      /* 如果行内元素有了浮动，则不需要装换为块级、行内块元素就可以直接给高度和宽度 */
      p {
        float: left;
        height: 200px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <span>1</span>
    <span>2</span>
    <p>ppp</p>
  </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>Document</title>
    <style>
      .box {
        width: 800px;
        border: 1px solid blue;
        margin: 0 auto;
      }
      .damao {
        float: left;
        width: 300px;
        height: 200px;
        background-color: purple;
      }
      .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .footer {
        height: 100px;
        background-color: black;
      }
      .clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="damao">大毛</div>
      <div class="ermao">二毛</div>
      <div class="clear"></div>
    </div>
    <div class="footer"></div>
  </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>Document</title>
    <style>
      .box {
        overflow: hidden;
        width: 800px;
        border: 1px solid blue;
        margin: 0 auto;
      }
      .damao {
        float: left;
        width: 300px;
        height: 200px;
        background-color: purple;
      }
      .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .footer {
        height: 100px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="damao">大毛</div>
      <div class="ermao">二毛</div>
      <div class="clear"></div>
    </div>
    <div class="footer"></div>
  </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>Document</title>
    <style>
      .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .claerfix {
        /*IE6、7专用*/
        *zoom: 1;
      }
      .box {
        /* overflow: hidden; */
        width: 800px;
        border: 1px solid blue;
        margin: 0 auto;
      }
      .damao {
        float: left;
        width: 300px;
        height: 200px;
        background-color: purple;
      }
      .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .footer {
        height: 100px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="box clearfix">
      <div class="damao">大毛</div>
      <div class="ermao">二毛</div>
      <div class="clear"></div>
    </div>
    <div class="footer"></div>
  </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>Document</title>
    <style>
      .clearfix:before,
      .clearfix:after {
        content: "";
        display: table;
      }
      .clearfix:after {
        clear: both;
      }
      .clearfix {
        /*IE6、7专用*/
        *zoom: 1;
      }
      .box {
        /* overflow: hidden; */
        width: 800px;
        border: 1px solid blue;
        margin: 0 auto;
      }
      .damao {
        float: left;
        width: 300px;
        height: 200px;
        background-color: purple;
      }
      .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .footer {
        height: 100px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="box clearfix">
      <div class="damao">大毛</div>
      <div class="ermao">二毛</div>
      <div class="clear"></div>
    </div>
    <div class="footer"></div>
  </body>
</html>
郭大胖ovo
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS学习笔记13——浮动
lxy95512的博客
01-14 139
CSS提供了三种传统布局方式(简单说就是舒如何进行排列顺序: 1、普通流(标准流) 2、浮动 3、定位 注意:实际开发中, 一个页面基本都包含了这三种布局方式。 标准流 标准流：就是标签按照规定好默认方式排列。 1.块级元素会独占一行，从上向下顺序排列。 常用元素:div、 hr、p、h1~h6、ul、 ol、 dl、 form、table 2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 常用元素: sp...
css浮动笔记
rebreeder的博客
09-01 139
html浮动
DIV + CSS 学习笔记（浮动）
相逢不晚的博客
03-11 865
二、浮动 浮动的元素会向左或向右浮动，直到碰到前面已经有浮动的元素或者是其父元素的边框为止。浮动的元素会脱离文档流（不再占有原来的位置）。 （一）左右浮动 块级元素除了使用display: inline-block;可以使其共占一行外，还可以使用浮动来实现。 还是两个div的例子，正常状态下是这个效果： 我们给这两个div加一个外层容器作为他们的父容器： .father-box { border: #FF0000 4px solid; } <div class="father-box">
浮动（CSS笔记)
qq_38350708的博客
04-27 319
1.浮动（float） 1.1 CSS布局的三种机制 网页布局核心—就是用CSS来摆放盒子 CSS提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 1.普通流（标准流） 块级元素独占一行，从上下顺序排列 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行 常用元素：span、...
css浮动（笔记）
weixin_50539249的博客
05-28 90
css浮动，清除浮动
学习笔记18:CSS清除浮动
01-08
清除浮动的方法 1、额外标签法（隔墙法）： 在浮动元素末尾添加一个空的标签，例如 优点：通俗易懂，书写方便 缺点：添加许多无意义的标签，结构化较差 :warning_selector:：新添加的标签必须为块级元素 2、父级...
css入门笔记
05-15
1.css的概述 1.问题 HTML属性修饰有一定局限，是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点：将css样式定义在HTML标记中 语法： 样式声明：用样式属性和值组成（属性:值;） ...
浅谈CSS浮动的特性
01-19
本文介绍了CSS浮动的特性，分享给大家，顺便给自己留个笔记 浮动具有以下特性： 盖不住的文本 浮动元素后面不是块级元素，后面的元素将会和它并排（除非设置了元素的宽度，并且屏幕放不下时将会换行） 浮动元素的...
狂神说视频-CSS笔记.pdf
11-12
CSS 笔记 CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...
01-HTML-CSS个人听课笔记
10-13
relative，absolute，sticky，Static、box-sizing属性、CSS 盒子模型、BFC块级格式上下文原理场景、元素水平垂直居中、元素隐藏、页面布局：Flex 布局、Rem 布局、百分比布局、浮动和清除浮动。 适用人群：初级开发...
关于CSS的浮动笔记
XIao___FAN的博客
12-06 240
内容来是作者学习尚硅谷浮动的相关视频所做笔记，希望能帮助大家，欢迎补充。 前言 在某一天，小范忘记了flex布局的使用方法，却想三个盒子并排在同一行，于是他找到了浮动。 浮动 可以使浮动的框向左或向右移动，直到它的边缘碰到包含框或者另一个浮动框的边框为止。 浮动的作用： 可以是一个元素向其父元素的左侧或者右侧移动 浮动的属性： float： 可选值：none，默认值，元素不移动 left，元素向左移动 ...
CSS笔记——浮动
lihaoen666的博客
09-01 223
浮动布局 1）固定布局 2）浮动流式布局 3）浮动自适应布局清除浮动准确来讲，应该是清除浮动带来的影响。 两种方式：HTML方式： 在父容器底部加上一个块状元素，并且clear: both ;  CSS方式：  1）给父元素添加clear：fix  2）给父元素添加after伪元素.clearfix:after{content: '';display: block;height: 0;ove
CSSpart4
weixin_45876739的博客
01-20 273
一、浮动 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动 1.什么是浮动 将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘 选择器{ float ： 属性值； } none：元素不浮动 left：元素左浮动 right：元素右浮动 2.浮动特性（重点） （1）脱离标准普通流的控制（浮）移动到指定位置（动），即脱标 （2）浮动的盒子不再保留原先的位置 （3）行显示 多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列 浮动的元
前端学习-css浮动笔记
weixin_46589442的博客
07-13 170
float 属性 一个元素设置了float属性，会表现出如下特性： 包裹性 破坏文档流 块状格式化上下文 没有margin合并 值 描述 left 元素向左浮动 right 元素向右浮动: none 默认值。元素不浮动，并会显示在其在文本中出现的位置 inherit 规定应该从父元素继承 float 属性的值 清除浮动 - 使用 clear 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。 使用
css 浮动 -张鑫旭博客笔记
sentimental_dog的博客
08-09 3568
原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址：http://www.zhangxinxu.com/wordpress/?p=594 1.浮动的原始意义 我们使用float浮动做了很多其本职工作以外的事情，于是我们会混淆，我们会回看不清float真正的面目。浮动真正的意义在哪里呢？要知道这个问题的答案很简单，假设现在CSS中
HTML跨年烟花
热门推荐
兔子王
06-04 1万+
学会了这个html烟花秀，跨年就不缺文案喽~
html实现粘贴excel数据，在页面表格中复制
最新发布
weixin_43805439的博客
06-13 487
Html table 实现Excel多格粘贴
css浮动和动画笔记
08-19
- *1* *3* [CSS学习笔记 04、浮动与定位](https://blog.csdn.net/cl939974883/article/details/124601968)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值