CSS布局之浮动float

最新推荐文章于 2023-01-07 18:39:02 发布
最新推荐文章于 2023-01-07 18:39:02 发布
阅读量165 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qugengting/article/details/97754032
版权

float:left

float:right

设置后会把位置让出来；如果本身就在左边，设置float:left，后面同级元素会排在后面

效果：

 

默认的div排列是会换行的 
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方 
如果超出了父容器，还会有自动换行的效果

清除float效果，可以用float:left,float:right,float:all等，也可以用<br>

来源：http://how2j.cn/k/css2/css2-float/252.html#nowhere

 

 

 

qugengting
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 浮动(float)页面布局
09-25
前四节的大练习大家做的怎么样？有没有难度，如果你觉着有难度没有关系，这节课，我带着大家做一下这个练习！
请问如何用四个字节的十六进制表示一个float浮点数
quchufeng的专栏
05-21 4651
例如：967.826978可以表示为4471F4ED的形式
CSS - 浮动布局（float）
伏城之外的博客
07-20 1万+
标准布局、标准流、标准布局的不足、浮动、浮动流、浮动元素特点、脱标、父容器高度塌陷、清除浮动、clear、额外标签法、::after伪元素法、浮动元素margin负值原理、双飞翼布局、圣杯布局、三栏式布局......
HTML与CSS基础（六）—— CSS布局（浮动float）
此心光明事上练的博客
01-07 1205
清除浮动带来的影响• 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素原因：• 子元素浮动后脱标 → 不占位置目的：• 需要父元素有高度，从而不影响其他网页元素的布局➢ 块格式化上下文（Block Formatting Context）：BFC• 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。➢ 创建BFC方法：1. html标签是BFC盒子2. 浮动元素是BFC盒子3. 行内块元素是BFC盒子。
CSS Float 浮动布局
blog
07-13 2738
文章目录前言一、Float 布局二、属性值三、代码实现clear 清除浮动clear 属性值三、Float 设计初衷与不足不足总结 前言 在页面开发的过程中，CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。 当前主要的布局方式有：浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等，本文将从浮动布局开始学习。 一、Float 布局 把一个元素“浮动”(float)起来，会改变该元素本身和在正常
CSS浮动（float）
热门推荐
屈帅波的技术博客
05-26 1万+
一 传统网页布局的三种方式 网页布局的本质：用 CSS 来摆放盒子，把盒子摆放到相应位置。 CSS 提供了三种传统布局方式（简单说就是盒子如何进行排列）。 普通流（标准流） 浮动 定位 这里指的只是传统布局，其实还有一些特殊高级的布局方式。 二 标准流（普通流/文档流） 所谓的标准流：就是标签按照规定好的默认方式排列。 块级元素会独占一行，从上向下顺序排列。 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式
DIVCSS布局：CSS浮动float属性详解.doc
01-08
DIVCSS布局：CSS浮动float属性详解
CSS布局详解浮动属性Float.pdf
11-26
...
CSS布局详解浮动属性Float.docx
11-26
...
flex-direction: column无效的情况
qugengting的博客
11-06 1万+
CSS3 设置如下： display: flex; flex-direction: column 意思是盒布局，并且该布局内部的子控件排列方式是纵向排列，即从上往下，但有一种情况属于例外，就是子控件的定位是这样的： position: absolute; 如果A子控件设置了以上属性，那么A不参与排列，BCD依次从顶上排列下来。...
CSS布局之显示方式display
qugengting的博客
07-30 474
参考：http://how2j.cn/k/css2/css2-display/767.html#nowhere
Flex笔记
qugengting的博客
10-29 153
参考链接：https://www.runoob.com/w3cnote/flex-grammar.html Flex布局： .box{   display: flex; } 6个属性： flex-direction            //排列方向 flex-wrap                  //换行策略 flex-flow                   //前两者的统一...
CSS杂记
qugengting的博客
04-19 100
height: 36px; //高度36px line-height: 36px; //行高36px,这样文字可以垂直居中，适用于单独一行http://how2j.cn/k/css2/css2-vertical-center/780.html width:20%; float:left; //两...
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
基于 Spring Cloud 组件构建的分布式服务架构
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
css浮动属性float详解
08-19
CSS中的浮动属性（float）用于控制元素在其父元素中的位置和布局。通过设置浮动属性，我们可以将元素从正常的文档流中脱离...然而，由于其一些潜在的问题，现代CSS布局技术更倾向于使用flexbox和grid布局来代替浮动。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值