css - 浮动

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

css - 浮动

一、float浮动

1：当为一个元素设置浮动以后，遇到父元素的边框或者其他的浮动元素则停止
2：浮动元素不会超过块元素:不会超过他上边的兄弟元素，最多最多一边齐
3：浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围:
4：开启span的浮动，内联元素脱离文档流以后会变成块元素
5：脱离文档流后，块元素不再独占一行，不再区分块和行内
6：脱离文档流后，块元素宽高默认被元素撑开，

二、高度塌陷和外边距重叠问题

在这里插入图片描述

weixin_43331769
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-浮动
JINGJID的博客
04-09 1756
1.display display的用法： block:块元素 inline-size: 行内元素 inline-block：是块元素，但可以内联，在一行 none：消失
css向左浮动错乱,CSS - 浮动：左对齐问题
weixin_39795268的博客
08-04 1216
我建立了一个论坛使用的DIV这里列出的是我有CSS - 浮动：左对齐问题/* forum like build */.myForum{float: left;width: 620px;margin-top: 10px;border: 2px solid #0F5C8E;padding: 1px;overflow: hidden;display: block;}.myForum > .head...
CSS - 浮动布局（float）
热门推荐
伏城之外的博客
07-20 1万+
标准布局、标准流、标准布局的不足、浮动、浮动流、浮动元素特点、脱标、父容器高度塌陷、清除浮动、clear、额外标签法、::after伪元素法、浮动元素margin负值原理、双飞翼布局、圣杯布局、三栏式布局......
CSS-浮动与定位
花城的博客
08-28 4746
CSS浮动. 父标签的塌陷问题及解决方法、溢出属性、CSS定位. 定位方法. 修改位置. 是否脱离文档流、z-index属性、透明度
CSS - 浮动、定位
好看的皮囊千篇一律，有趣的灵魂万里挑一。
04-08 877
CSS浮动（Float）是一种布局技术，用于控制元素在页面中的位置。通过将元素浮动到其容器的左侧或右侧，可以使其他元素环绕在其周围。
CSS--浮动
weixin_42584834的博客
11-28 914
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。6.浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高。元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置。5.如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移。4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素。1.浮动元素会完全脱离文档流，不再占据文档流中的位置。所以元素下边的还在文档流中的元素会自动向上移动。2.设置浮动以后元素会向父元素的左侧或右侧移动。
CSS - 浮动元素的margin-left和margin-right
伏城之外的博客
07-12 1万+
marigin-left和margin-right理解 margin-left：“盒子”元素的左外边距，当属性值增大，元素表现为向右移动，该属性值减少，元素表现为向左移动。 margin-right："盒子"元素的右外边距，当属性值增大，元素表现为向左移动，该属性值减少，元素表现为向右移动。 float:left和float:right理解 float:left 元素变为浮动元素，并向左浮动 float:right 元素变为浮动元素，并向右浮动 单纯的float:left 当前有如下情况.
css-浮动造成的高度塌陷原因以及解决方法 清除浮动 BFC
m0_51534164的博客
09-18 1201
css-浮动造成的高度塌陷原因以及解决方法 清除浮动 BFC
CSS-盒子浮动
fcc627的博客
04-19 4541
文章目录一、浮动导读1.1 什么是浮动1.2 浮动特性1.3 网页布局准则二、清除浮动2.1 清除浮动的本质2.2 消除浮动影响（副作用）的方法 一、浮动导读 1.1 什么是浮动 float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框边缘 语法： 选择器 { float ： 属性值 ；} 属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值） 1.2 浮动特性 ①设置了浮动（float）的元素最重要特性：
css-浮动模型、div包裹浮动元素
“ccc111”的博客
02-01 1145
css浮动模型的介绍以及如何利用它去结果div的包裹浮动元素问题
Day06-CSS布局-浮动
07-10
本篇文章将深入探讨CSS浮动的原理、用途以及如何在实践中应用。 一、浮动的概念 浮动是CSS中的一个定位属性，由`float`关键字定义，可取值为`left`、`right`或`none`。当一个元素被设置为浮动，它会尽可能地向左或...
css基础4-浮动布局
12-05
CSS基础-浮动布局 CSS 布局浮动目录是 CSS 中的一种基本布局方式，通过浮动可以实现网页的水平布局和垂直布局。浮动主要用于网页布局，让垂直布局的盒子变成水平布局。 一、结构伪类选择器 结构伪类选择器是一种...
CSS-清除浮动
01-13
从别人博客看来的，整理成了PPT，分享下吧，感觉挺好懂的
day06（CSS04-浮动）.rar
12-01
标题中的"day06（CSS04-浮动）.rar"指示了这是一个关于CSS浮动的教程资料包，属于Web前端开发的学习资源。CSS是层叠样式表（Cascading Style Sheets）的缩写，它是用来描述HTML或XML（包括如SVG、MathML等各种XML...
CSS 关于浮动
09-25
浮动是CSS布局中的一种关键技术，尤其在传统的网页设计中占据重要地位。它的主要作用是让元素在页面上脱离正常文档流并沿着特定方向移动，从而实现文本环绕效果或其他复杂的布局结构。这一概念起源于印刷设计，其中...
CSS3中动画的制作案例
业精于勤荒于嬉，行成于思毁于随
08-03 202
动画主要属性：动画名称，持续时间，记时函数，延迟，迭代次数，方向
4个自定义倒计时
lulei5153的博客
08-03 199
【代码】4个自定义倒计时。
CSS3中的3D变换
业精于勤荒于嬉，行成于思毁于随
08-03 94
总结起来，CSS3的3D变换使得我们可以在网页中创建各种炫酷的3D效果，通过平移、旋转、缩放和倾斜来改变元素的位置和形状。默认值为flat，表示子元素在平面中呈现，设置为preserve-3d可以将子元素在3D空间中呈现。CSS3中的3D变换（3D Transformations）允许我们在网页中创建3D效果的元素。它提供了一系列的属性和方法，可以将元素沿x、y和z轴进行移动、旋转、缩放和倾斜。通过设置一个正值来创建观察者和3D元素之间的距离。- scale3d(x, y, z)：沿x、y和z轴进行缩放。
css3的继承性
最新发布
jht_520的博客
08-03 293
继承性的使用需要注意一些细节。首先，只有在没有明确指定样式的情况下才会发生继承。其次，继承性只会发生在父元素和其子元素之间，对于兄弟元素之间的样式继承是不会发生的。这意味着如果一个元素没有指定某个样式属性的值，它将会继承父元素的该样式属性的值。继承性可以减少代码量，提高代码的可维护性。然而，并非所有的样式属性都具有继承性。CSS3文档中明确规定了哪些属性具有继承性。有些属性默认是不具有继承性的，但可以通过设置特定的值来使其具有继承性。关键字来将非继承性属性设置为继承性。关键字来取消继承，使元素使用默认值。
韩顺平详解HTML-CSS-JS网页设计教程
在笔记中，CSS的学习内容包括块级元素、行内元素、标准流盒子模型和浮动定位。这些是理解网页布局的关键，如通过div+css实现网页布局，例如对sohu首页的布局案例分析，帮助学习者掌握网页设计的视觉呈现技巧。 3. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值