浮动布局的属性、特点以及消除浮动的方法

最新推荐文章于 2024-05-08 05:39:17 发布
最新推荐文章于 2024-05-08 05:39:17 发布
阅读量276 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45968130/article/details/119894395
版权

浮动布局的主要用法

          为了让块级元素在一行中显示（列级布局），或者让文字在图片的周围显示。

float属性取值（如果一个元素添加float，那么这个元素就会成为一个浮动元素）

          left    向左浮动

          right   向右浮动

          none    不浮动

          inherit 浮动方式继承父元素

浮动元素的特点

  1. 当一个元素是浮动元素的时候，他会失去对父元素的支撑 
  2. 脱离文档流

清除浮动的方法

  1. 给父元素添加overflow:hidden
  2. 使用伪元素
头发头发不要秃
关注
html清除浮动的6种方法示例
10-26
HTML中的浮动布局是一种常见的网页设计技术，用于实现元素并排显示。然而，浮动元素会导致其父元素的高度塌陷，即父元素无法包含其内部浮动的子元素，这可能会影响页面的布局。为了解决这个问题，有多种清除浮动的...
CSS浮动
YBZ_CSDN的博客
10-08 420
浮动 视觉格式化模型，大体上将页面中盒子的排列分为三种方式： 常规流 浮动 定位 应用场景 文字环绕 横向排列 浮动的基本特点 修改float属性值为： left：左浮动，元素靠上靠左 right：右浮动，元素靠上靠右 默认值为none 当一个元素浮动后，元素必定为块盒(更改display属性为block) 浮动元素的包含块，和常规流一样，为父元素的内容盒 盒子尺寸 宽度为auto时，适应内容宽度 高度为auto时，与常规流一致，适应内容的高度 margin为auto，为0. 边框、内边距
CSS中水平布局手段浮动float属性及其需掌握的特点
王春燕的博客
04-12 556
一、浮动的介绍 块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，如果希望块元素在页面中水平排列，可以使块元素脱离文档流 使用float来使元素浮动，使一个元素向其父元素的左侧或右侧移动，从而脱离文档流 可选值： none，默认值，元素默认在文档流中排列 left，，向页面的左侧浮动 ...
CSS浮动布局特性
Arcofcosmos的博客
01-21 660
浮动布局 浮动可以改变元素标签的默认排列方式。例如浮动可以让块级元素一行内排列显示。 float属性用于创建浮动框，使用left或者right属性将浮动框移到一边，left往左移，right往右移，移动的位置是该浮动框的左边缘或右边缘抵达一个盒子边缘或者抵达另一个浮动框的边缘。优先依附在另一个浮动框的边缘。如果移动的这一边没有浮动框，那就移动到盒子边缘，例如父类盒子的边缘。 选择器 { float: 属性值; } 属性值有： none //元素不浮动，默认值 left //元素向左浮动 right
CSS基础（四）——浮动布局
pro1822的博客
03-27 8061
CSS基础（四）——浮动布局
CSS 常用样式浮动属性
猿码互联
10-12 521
一、概述一、概述CSS 中，浮动属性的作用是让元素向左或向右浮动，使其他元素围绕它排布，常用的浮动属性有以下几种：使元素向左浮动，其他元素从右侧包围它。使元素向右浮动，其他元素从左侧包围它。取消元素的浮动状态。浮动属性常用于网页布局中，可以使元素实现多栏布局、文字环绕图片等效果。需要注意的是，浮动元素会脱离文档流，可能会影响页面其他元素的布局，需要使用 clear 属性清除浮动影响。同时，如果浮动的元素宽度超过了父元素宽度，需要设置 overflow:hidden;
清除浮动的几种方法(推荐)
09-24
总的来说，选择哪种清除浮动的方法取决于你的项目需求、浏览器兼容性要求以及对现代CSS布局技术的熟悉程度。随着浏览器对Flexbox和Grid布局的支持越来越广泛，这些新方法在许多情况下可能更为理想。然而，在处理旧版...
浮动层自动适应高度的解决方法
09-25
在网页设计中，浮动元素的使用常常导致包含它们的父...总的来说，这两种方法都是为了解决浮动元素对父元素高度的影响，以保持页面布局的正常显示。在实际应用中，开发者可以根据项目需求和浏览器兼容性选择合适的方法。
浮动布局
离开实践的理论是空洞的理论,没有理论指导的实践是盲目的实践
03-28 220
float3个属性值： left-左浮动   right-右浮动  none-不浮动 特点： 1.元素会左移，或右移，直至碰触到容器为止。 2.设置了浮动的元素，仍旧处于标准文档流中，意味着它仍占据标准文档中的空间，会对它周围的元素产生影响。 3.当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。 4.当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特质紧
css中浮动和Flex布局
最新发布
G24gg的博客
05-08 1172
CSS中的浮动（float）是一种布局技术，它允许元素脱离正常的文档流，使其向左或向右移动，直到其边缘触碰到包含块或另一个浮动元素的边缘。浮动元素仍然保留在文档流中，这意味着它们占据空间，但它们周围的元素会围绕它们进行布局。以下是关于CSS浮动的一些关键点：浮动属性：属性用于创建浮动元素，其值可以是、或（默认值）。文档流：浮动元素会脱离文档流，但它们仍然保留在文档的布局中，这意味着它们会推挤其他元素。环绕文本：当浮动元素后面没有足够的空间时，文本会环绕在浮动元素的周围。清除浮动：使用属性可以清除浮动的影响，
css(八)：css的float属性，浮动布局、position属性
白骨梦儿
06-17 1706
一、明白什么是文档流 所谓文档流：指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列 脱离文档流：也就是说将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 只有绝对定位absolute和浮动float才会脱离文档流； folat：就想到于浮起来，原来元素本身的占位就空出来让给下一个元素顶上去；相当于多层次了； 截图举例： 效...
浮动布局的特点是什么？【前端技术】
zy1992As的博客
12-06 541
网页布局的本质——用 CSS 来摆放盒子。普通流（标准流）、浮动、定位是三种传统的布局方式。有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式，让多个块级元素一行内排列显示，控制多个盒子之间的间隙。 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。利用float 属性可以创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 语法： 加了浮动之后的元素,会具有很多特性,需要我们掌握的：　　1. 浮
12.浮动属性
potato123232的博客
03-04 1809
浮动是布局时使用的，网页布局的本质是使用css拜访盒子，css提供了三种传统布局方式，分别是标准布局(流)，浮动布局(流)与定位布局(流)。(移动端的布局方式会更多)大多数网页都会同时使用这三种布局方式 我们之前采用的都是标准布局(按照默认方式排列盒子) 目录 1初识浮动属性 2浮动特性 2.1浮动元素会脱离标准流(脱标) 2.2浮动元素会在一行内显示并且顶部对齐 2.3浮动元素会具有行内块元素的特征 3浮动属性的一个例子 4清除浮动 4.1额外标签法 ......
布局——浮动布局
QYXQYX_的博客
08-18 945
1.布局：元素默认的排列方式，往往这种默认的文档流满足不了我们的需求，所以出现了浮动布局 等。 2.浮动布局： float —— 属性名 属性值：left 向左浮动 ；right 向右浮动；none 【默认值】,不浮动；inherit 继承父元素 目的：浮动布局的主要用法是为了让块级元素在一行中显示（列级布局），或者让文字在图片的周围显示。浮动元素用来解决块级元素在X轴上的排列问题ted 使用方法：浮动布局通常出现在div这种父子结构...
浮动布局的优点？有什么缺点？清除浮动有哪些方式？
qq_43393963的博客
10-13 1930
浮动布局简介 当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变得好像浮动元素不存在一样。 优点 在图文混排的时候可以很好的使文字环绕在图片周围 当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的：第一个就是关于横向排序的时候，...
css布局float浮动布局详解，工作半年后才知道的知识
weixin_34062469的博客
11-01 1828
★float属性 页面布局时主要采用：浮动(float)和定位(position)，还有就是即不浮动也不定位的正常文档流结构三种； float属性常用的语法是：float:left|right|none；任何元素都可以被浮动，无论是块元素div，ol，ul还是行内元素span、strong都可以浮动，重要的是任何被声明float的元素都会自动被设置成块元素，也就就...
CSS浮动布局 float属性
believehxl的博客
03-23 179
CSS浮动布局 float属性 <!DOCTYPE html> <html> <head> <title>CSS浮动布局</title> <style type="text/css"> #myd{height: 400px;width: 600px;border: green 10px dashed;background-color: purple;padding: 10px;overflow: auto;} #myd di
浮动布局的方法（总结）
热门推荐
bingkingboy的博客
04-01 1万+
HTML布局中浮动布局非常常见，很多网站普遍都会使用到浮动布局，博客网站使用最多。做过很多网站，却没有总结过，今天就来分享下自己在浮动布局的总结（本文以微博为例） 微博排版 先上图片：       盒子中包含左右两个子盒子（用黑边框将其分开），就以这种左右两栏为布局的模型，来总结浮动布局的方法。 浮动布局HTML排版 <div class="container">
浮动布局详解：css页面设计与实践
在完成浮动布局后，需要注意的是，由于浮动元素脱离了正常文档流，可能会导致父元素高度塌陷。为了解决这个问题，我们可以使用clearfix类或者设置`overflow: auto;`来包含浮动元素。例如： ```css .clearfix::after...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值