css-float浮动

最新推荐文章于 2022-11-28 21:08:42 发布

萝卜儿

最新推荐文章于 2022-11-28 21:08:42 发布

阅读量176

点赞数

分类专栏： web前端 html&&css

本文链接：https://blog.csdn.net/uniquehzx/article/details/77606721

版权

web前端同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

html&&css

8 篇文章 0 订阅

订阅专栏

float:浮动

float: left right none; 设计之初的作用是做文字环绕。常用于水平排列，菜单导航。

1.浮动的元素撑不开父级的高度

float属性对块级元素的影响:

设置浮动后，块级元素的宽度不再跟随父级宽度，而是内容决定（内容撑开宽度）

float属性对行级元素的影响:

可以设置尺寸以及盒模型

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

萝卜儿

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS-float浮动和高度塌陷问题详解

主营前端方向，技术栈是vue

11-21

969

float浮动和高度塌陷问题详解(基本属性、环绕、脱离文档流撑开内容，子浮父塌页面混乱，法1开zoom，法2clear:both，最终方案多功能clearfix)

CSS-float浮动布局、float清除浮动与flex布局

热门推荐

程序员阿甘的博客

07-20

1万+

标准布局、标准流、标准布局的不足、浮动、浮动流、浮动元素特点、脱标、父容器高度塌陷、清除浮动、clear、额外标签法、::after伪元素法、浮动元素margin负值原理、双飞翼布局、圣杯布局、三栏式布局......

CSS-float浮动与流体布局（2）

柒青衿的博客

12-11

2083

2 float特性 2.1 包裹性未浮动： hi 效果：浮动后： hi 效果：结论：未设宽度的块级元素浮动后展示效果如果内联元素，会自动收缩包裹其内容。具有相同特性的css样式还有： display:inline-block/talbe-cell position:absolute/fixed overflow:hidden/scroll 2.2

CSS - float小结

程序员阿甘的博客

07-11

1163

标准流块级元素都需要独占一行，如果只使用原始的块级元素布局的话，就会出现下面这种情况 box1,box2,box3都是div元素，即块级元素，它们每个都独占一行，导致整体就像“流”一样，自上而下的布局。我们将这种流称为“标准流”。浮动布局上面标准流中，块级元素都需要独占一行，这样不利于网页布局，如果可以让多个块级元素在一行排列，那么布局就好看多了。那么如果让多个块级元素共享一行呢？我这里设计了 container.width=750，没有设置height (实际contai...

CSS之float浮动

weixin_45707229的博客

07-03

304

CSS的浮动，以及不设置高度的父元素中有浮动子元素，导致影响下面标准流的问题，针对这个问题提供清除浮动的方法。

CSS--浮动

weixin_42584834的博客

11-28

1002

浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。6.浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高。元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置。5.如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移。4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素。1.浮动元素会完全脱离文档流，不再占据文档流中的位置。所以元素下边的还在文档流中的元素会自动向上移动。2.设置浮动以后元素会向父元素的左侧或右侧移动。

css-常用布局方法03-float浮动 + margin布局

东东爱编码博客

03-04

520

文章目录一、css-常用布局方法1. float2. float影响3. float浮动 + margin4. 如何清除浮动一、css-常用布局方法 1. float 元素“浮动” 脱离文档流但不脱离文本流 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt

css-paper-effect---float

03-29

"css-paper-effect---float"这个主题旨在展示如何通过CSS创建出类似纸张的视觉效果，并结合浮动特性来组织页面内容。首先，让我们了解“纸效果”是什么。这种效果通常包括模仿纸张的颜色、纹理、边角、阴影以及...

CSS-float详解[借鉴].pdf

10-11

在CSS布局中，浮动（float）是一个非常关键的概念，它被广泛用于创建复杂的网页布局，如图文混排、多列布局等。浮动最初是为了让文本能够环绕图像而设计的，但随着时间的发展，它已经成为构建现代网页布局的重要工具...

CSS-float浮动

主营前端方向，技术栈是vue

11-13

454

float浮动(基本属性、环绕、脱离文档流撑开内容)

position和float的区别

uniquehzx的博客

08-27

1987

只有position才是定位，float不能说是定位，不过你可以说这两种布局方式有什么不同。float和position这两者并没有孰好孰不好的问题，两者按需使用，各得所需的效果。 float从字面上的意思就是浮动,float能让元素从文档流中抽出，它并不占文档流的空间，典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要

微信小程序获取openid，unionid

uniquehzx的博客

12-25

1744

注意openid并不能作为小程序用户的唯一标识，不同用户有可能相同，unionid才是唯一标识，这个参数我们需要后台去微信绑定小程序后才有。（通过 https://api.weixin.qq.com/sns/jscode2session? 接口返回的参数获得）方法一（前端获取）注意：虽然前端能拿到openid，但是发布上线的时候会无法过审，因为出于安全考虑，前端代码不允许暴露小程序app...

Base64图片编码

uniquehzx的博客

08-23

696

Base64图片编码：由于某些系统中只能使用ASCII字符。Base64就是用来将非ASCII字符的数据转换成ASCII字符的一种方法。 1. 减少http的请求我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的（所以才有了 csssprites 技术的应运而生，但是 csssprites 有自身的局限性)。不管如何，图片的下载始终都要向服务器

css三种引用方式

uniquehzx的博客

08-18

416

行内样式：直接在HTML标签中设置的样式。实际在写页面时不提倡使用，在测试的时候可以使用优点：不会额外的产生请求缺点： 1.容易产生重复的代码，造成文档体积变大 2.不利于维护 3.不符合样式与结构分离的规范内部样式: 在style标签中书写CSS代码。style标签写在head标签中。

微信小程序踩坑系列（三）—— 带参跳转页面

uniquehzx的博客

01-07

405

页面跳转最好不要带参跳转，采用全局变量比较好。为什么这么说呢比如：从 A 页面到 B 页面带的对象 c = {name:'小明'，age:'18'，hobby:'play'}, 从 AA 页面到 B 页面带的对象 d = {pname:'小红'，page:'17',phobby:'play'}, #####对象内部的字段名称不一样，B页面在拿到该对象后解析就蒙了 1.在 A 页面中...

css-背景设置

uniquehzx的博客

08-21

387

css-背景设置背景设置 background: background-color: 背景颜色设置 background-image:url() 背景图片设置 background-repeat: repeat-x | repeat-y | no-reoeat;背景平铺设置 background-position: x y;背景定位设置 background-size:;