css 的 float 属性

最新推荐文章于 2022-10-13 17:59:04 发布
最新推荐文章于 2022-10-13 17:59:04 发布
阅读量87 收藏
点赞数
分类专栏： front
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012745499/article/details/117793253
版权

float 属性表示浮动, 会脱离文档流

 /*
      浮动元素不会挡住文字
     */

    .box1 {
      width: 100px;
      height: 100px;
      /* 向左浮动 */
      float: left;
      background-color: #01AAED;
    }
    p {
      background-color: #BDEBEE;
    }


<div class="box1">

</div>
<p>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</p>

浮动

艾斯比的日常
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css设置float,【CSS】float属性
weixin_29271053的博客
08-03 1415
float浮动属性1、作用:将页面元素浮动起来，使其能够向左或者向右排列2、应用:实现页面中布局的左右排版实现图文环绕的版式效果3、值：4、原理:浮动元素将脱离默认的文档流，漂浮在默认文档流之上浮动的元素会向左或向右移动，直到它的外边缘碰到父级元素或这个元素之前的另一个浮动元素的边框为止普通文档流可以看作是一个X、Y轴的平面流，float浮动流可以看到是一个Z轴上的立体流，Float浮动流离眼睛更...
javascript css float属性的特殊写法
10-30
- 对于现代浏览器来说，使用 `element.style.cssFloat` 是更为推荐的做法，因为 `styleFloat` 已经被废弃。 4. **示例代码**： ```javascript function setFloat(element, direction) { if (typeof element....
css中脱离标准流的三种方式,CSS的三种手段让元素脱离标准本文档流
weixin_34055346的博客
08-04 7383
1、浮动浮动是CSS中用到的最多的一个选项，他有三个性质。关于浮动我们要强调一点，永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。1.1 浮动元素脱离标准文档流1.1.1 大概描述：有两个盒子，一个盒子浮动，一个盒子不浮动。浮动的盒子会脱离标准文档流，不浮动的盒子会在标准文档流中成为第一个，所以两者出现覆盖现象。1.1.2 大概描述：一个行内标签在标准文档流中是不能设置宽高的，但是...
float与定位脱离文档流布局规则
weixin_50736511的博客
03-21 1133
脱离文档流的css 1.float:left; 2.position: absolute; 3.position:fixed 一、float 使用float可以脱离文档流。 使用float脱离文档流时，其他盒子会无视这个元素，该元素会浮动于其他文档流之上。 注意！！！：其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。 二、position: absolute; 若只指定 position: absolute; （1）相对于前面的元素则会以正常的文档流方式排练在前面的元素后面 ​ (2) 相对
css使元素脱离文档流+浮动
你好牛蛙！
10-25 7469
块元素在文档流中默认垂直排列。 要我们设置块元素水平排序，我们可以设置块元素为行内块元素或者设置块元素脱离文档流 float使块元素脱离文档流(浮动) float w3school上面这么解释 语法： float:值 可能的值： left 元素脱离文档流向左浮动。 right 元素脱离文档流向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性的值。 这是正常情况下块元素在文档流中的情况： 当使div2脱离文档流： 这里设置
对css浮动的基本理解——文字绕排、创建分栏、脱离文档流及解决办法
ch206265的博客
04-06 639
浮动元素的使命就是尽可能的向左上或者右上迁移。最初创建浮动float属性的主要目的就是实现文字绕排图片的效果，当然浮动float也成了多栏布局的最佳方式。但是，添加过浮动float属性后的元素已经脱离了文档流，它对文档的布局可能会产生破坏性。
深入研究 CSSfloat属性
分享身边生活经验blog
10-13 1747
CSSfloat是一种定位属性，它将元素放置在其容器的左侧或右侧，并允许内联元素环绕它。过去，float它因被滥用于页面布局而声名狼藉。这导致一些开发人员质疑它现在是否已弃用，还是应该完全避免！CSSfloat仍然是相关的。我们应该在正确的上下文中使用它！本文讨论了 CSS 浮动的历史，并展示了float可用于现代网页设计的几种方法，以实现创意文本布局和令人惊叹的设计元素。
多列网页布局CSS float 属性和 CSS Clear 属性
allway2的博客
07-07 1109
CSS float 属性用于设计多列网页布局。如果你想设计两列或三列的网页布局，你必须在浮动属性的帮助下浮动你的 div 元素。div 标签是块级元素，因此，div 元素获取完整的水平空间，下一个 div 元素从新行开始。如果您希望多个 div 并排排列并制作一个优雅的设计网页。在上面的代码中，我们应用了 2 个 div，它们的名称分别是 left-sidebar 和 main。对这些 标签应用一些 CSS 属性。图 1 – float 属性在创建多列布局中的应用 注意：在这个设计中，所有的 d.....
css float属性 图解float属性的点点滴滴
09-22
【float属性详解】 在CSS中，`float`属性是一个非常关键的布局工具，它用于控制元素在容器内的位置，特别是在处理图文混排或者创建多列布局时。`float`属性主要有三个值：`left`、`right`和`none`。 1. `float: ...
css浮动 float属性详解
11-21
【CSS浮动(float属性)详解】 一、浮动的概念 浮动（float）是CSS布局中的一个重要概念，它使得元素能够脱离正常文档流，向左或向右移动，直至其边框接触到包含框或另一个浮动元素的边框。这个特性最初设计是为了...
css float属性_动力节点Java学院整理
09-27
浮动（Float）是CSS布局中的一个关键概念，它主要用于创建多列布局和控制元素的排列方式。`float`属性允许元素在文档流中浮动，从而影响周围元素的布局。本篇将详细介绍`float`属性及其在页面布局中的作用。 ### 1....
CSS 学习-1. Float(浮动)
qq_27371025的博客
05-09 3337
前言 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），用在图片附近可以实现文字环绕的效果，也可以使用在布局上。 Float 浮动 什么是浮动？浮动，顾名思义，就是漂浮的意思。指的是一个元素脱离文档流，悬浮在父元素之上的现象。 浮动语法：float：none、left、right； 值和描述： none：元素不浮动（默认值） left：元素向左浮动 right：元素向右浮动 浮动特性： 浮动元素会脱离标准流（脱流）. 浮动的盒子不在保留原先的位置
css 的 opacity 属性
艾斯比
06-14 6427
opacity 用于指定元素透明度, 支持 0~1 之间的小数. 默认值 1-完全不透明, 0-完全透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>opacity</title> <style> /* opacity 默认 1, 完全不透明 0 完全透明
浏览器 f12 的 console 功能简介
艾斯比
04-27 4826
在做前端开发时, chrome 浏览器的 f12 功能非常好用, 可以调试 html js css 代码 其中 console 标签页表示控制台, 我们可以输入 js 代码, 回车执行 常用的命令有 console.log 打印日志 console.count 计数器, 记录执行的次数 console.time 计时, console.timeEnd 停止计时并打印 $() 表示使用选择器获取单个元素, $$() 表示使用选择器获取元素数组 // 打印 log info debug warn erro
js 如何获取对象的动态属性
艾斯比
05-11 4040
js 有两种方式获取对象的属性 点语法, 例如 person.name 中括号语法, 例如 person ['name'] 其中, 第一种不能使用变量, 而第二种可以使用变量 let person = { name: 'wj', age: 20 } // 点表示法 // 这里不能使用变量作为对象的属性名 console.log(person.name); // 中括号表示法 // 这里可以传入变量作为对象的属性名 let name = 'name';
js 绑定事件的 3 种方式
艾斯比
04-20 3887
js 作为脚本语言, 可以为页面上的元素绑定事件, 有 3 种方式 在 html 中, 声明 onclick 属性, 值为函数调用, 不推荐, html 和 js 耦合, 不利于维护 在 js 中, 对元素赋值 onclick 属性, 值为函数声明, 不推荐, 只能赋值一个回调函数, 多次赋值, 之前的会失效 在 js 中, 为元素添加 addEventListener, 推荐做法, 可以为一个事件类型绑定多个回调函数 <html> <button onclick="triggerC
js 的 slice 和 splice
艾斯比
05-26 3836
js 的 slice 和 splice 都是数组的方法 slice 不改变原数组 splice 改变原数组 let arr = [1, 2, 3, 4, 5] // slice(start?: number, end?: number): T[]; // start 和 end 表示索引 // slice(start[, end]) [start, end) 左闭右开区间 // 返回值是新的数组, 注意原数组不变 console.log(arr.slice(1, 4)); // spli
js 如何优雅赋值默认值
艾斯比
01-20 3742
我们可以使用 let data = targetValue || defalutValue; 优雅地为变量赋值默认值 let data = { name: '你好鸭' } // 短路或 // 当 data.name 不为 null '' 0, 则表示 false, 那么会返回第二个值. 否则返回 data.name let name = data.name || '默认名字' console.log(name); // 赋值 data.name = null; // data.name 为 null,
css float 属性
最新发布
08-21
CSS中的`float`属性用于指定元素的浮动方式。它可以将一个元素从正常的文档流中移动，并使其向左或向右浮动。 `float`属性可以取以下值： - `left`：元素向左浮动，周围的内容将围绕在它的右侧。 - `right`：元素向右浮动，周围的内容将围绕在它的左侧。 - `none`：默认值，元素不浮动，保持在正常的文档流中。 - `inherit`：继承父元素的浮动属性。 使用`float`属性时，需要注意以下几点： 1. 浮动元素会脱离正常的文档流，可能会影响其他元素的布局。 2. 浮动元素之间会产生重叠，可以通过设置合适的宽度和高度来避免重叠。 3. 使用浮动布局时，应该清除浮动以避免父容器塌陷，可以使用`clear`属性来清除浮动。 浮动布局常用于创建多列布局、图文混排等效果。需要注意的是，现代CSS布局更常使用Flexbox或Grid等更强大和灵活的布局方式，而尽量避免使用浮动布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值