CSS基础之浮动

于 2024-09-04 16:37:26 发布
阅读量391 收藏 5
点赞数 4
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_86401473/article/details/141897677
版权
  • 浮动最典型的应用：可以让多个块级元素一行内排列显示

| 属性值 | 描述 |

| — | — |

| none | 元素不浮动 |

| left | 元素向左浮动 |

| right | 元素向右浮动 |

  • 网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

  • 网页布局第二准则：先设置盒子大小，之后设置盒子的位置

2.浮动的特性

======================================================================

①脱标：浮动元素会脱离标准流

  • 浮动的盒子不再保留原先的位置

在这里插入图片描述

② 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

在这里插入图片描述

  • 浮动的元素是相互贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

③ 浮动元素会具有行内块元素特性

  • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

  • 如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度

  • 浮动的盒子中间是没有缝隙的，是紧挨着一起的

3.浮动元素经常和标准流父级搭配使用

=================================================================================

为了约束浮动元素位置, 我们网页布局一般采取的策略是: 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

在这里插入图片描述

4.浮动的注意点

=======================================================================

①先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

②一个元素浮动了，理论上其余兄弟元素也要浮动

③浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

5.清除浮动

=====================================================================

①为什么要清除浮动

  • 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

在这里插入图片描述

  • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

  • 理想中的状态，让子盒子撑开父亲，有多少孩子，我父盒子就有多高

②清除浮动的本质

  • 清除浮动的本质是清除浮动元素造成的影响

  • 如果父盒子本身有高度，则不需要清除浮动

  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

③清除浮动的方法

2401_86401473
关注
前端开发基础之CSS选择器——浮动
weixin_52626489的博客
05-04 1801
浮动的作用 早期：图文环绕 现在：让垂直布局的盒子变成水平布局 浮动的代码 属性名：float 左浮动：float: left; 右浮动：float: right; 代码如下： <style> .left { width: 100px; height: 100px; background-color: red; /* 设置左浮动 */ float: le
css如何让浮动元素水平居中
12-29
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法，下面先给大家分享一下三种方法，希望能帮助到大家。 方法一： 1、HTML 部分： <div class=box> <p>我是浮动的</p> <p>我也是居中的</p> </div> 2、CSS 部分： .box{ float:left; position:relative; left:50%; } p{ float:left; position:relative; right:50%; }
前段小笔记
LHTY15091813836的博客
08-31 244
4.在浮动元素之后，与浮动元素呈并列关系的位置，加一个不浮动块元素（空的div标签（div本身不浮动，没有尺寸）），在空的div标签上加上属性：clear：both。文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示。任何标签都可以设置浮动，元素设置浮动后，不再区分标签的分类了，都类似于行内块标签(可以设置宽高，具有盒模型特性)，子元素设置浮动后，脱离正常标准流，不占位，会导致父元素高度。...
几个经典的css技巧
zzlnet的专栏
12-29 116
使用 line-height 垂直居中 line-height:24px;     使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致） 清除容器浮动 #main { overflow:hidden; }     不让链接折行 a { white-space:nowrap; }     上面的设定就能避免链接...
CSS 浮动元素居中
shaonian1996
02-16 724
浮动元素居中对于浮动元素无法使用margin{0  auto}可在最外层设置一个div，让宽度等于里面div宽度之和，这里并不完全是width之和，如果，里面含有边距，要加上边距。html:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;浮动元素居中&lt;/ti..
CSS 浮动元素的水平居中
M_xiaoxiao的专栏
11-26 613
对于定宽的非浮动元素我们可以用margin:0 auto; 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。分解如下： 1、HTML部分： 我是浮动的 我也是居中的 2、css部分： .box{ float:left; position:relative; left:50%; } p{ float:left; position:rela
css系列之浮动博客源码
09-10
通过学习这个浮动博客源码，你不仅可以掌握CSS基础，还能进一步提升你的网页布局技巧，为你的网站或博客设计带来更多的可能性。记得动手实践，不断试验和调试，这将有助于巩固你的理解并激发新的创意。
css基础4-浮动布局
12-05
CSS基础-浮动布局 CSS 布局浮动目录是 CSS 中的一种基本布局方式，通过浮动可以实现网页的水平布局和垂直布局。浮动主要用于网页布局，让垂直布局的盒子变成水平布局。 一、结构伪类选择器 结构伪类选择器是一种...
CSS基础学习之定位—流定位 浮动定位 相对定位 绝对定位 固定定位 粘性定位
01-08
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的...
css 相对定位 绝对定位 浮动 分析
09-25
相对定位是CSS定位的基础，它允许元素在不改变其在正常文档流中的位置的情况下进行微调。当一个元素被设置为相对定位，通过`position: relative;`，我们可以使用`left`、`right`、`top`和`bottom`属性来调整元素相...
css中如何居中一个浮动元素,css浮动元素的居中的例子
weixin_33767088的博客
08-03 2141
居中对于大家来说指的是页面了，此时我们通常使用提50%来实现了，下面来看一个css浮动元素的居中的例子，希望例子对各位有用。关于浮动元素的居中，其实不太常用，但为了应付某些奇葩的面试官，也要知道怎么解决这个问题。贴出一段css代码：width:50%; height:300px; float:left; margin-left:50%; position:relative; left:-25%;...
CSS专题之浮动，CSS盒子模型居中方法
最新发布
m0_60147147的博客
03-31 322
1 问题描述若想实现如下所示布局，该如何做？HTML结构大致如下(section1高200px,宽40%,section2高100px，宽50%)：头部/header尾部步骤1：设置section1左浮动,大致出现下图：仔细观察，section1虽然脱离文档流，但仍然占据了section2和尾部的位置，导致内容被挤压，注意此时设置section2的margin-left:40%可得到如下效果：步骤2：清楚浮动height:0;clear:both;
css基础（浮动，定位，居中，表单）
m0_57036170的博客
08-03 1311
设置浮动的元素超出文档流文档流：就是元素从上到下，从左到右的布局顺序浮动的作用：从整体出发，把标签元素进行横向布局。
让浮动元素居中的几种方法
weixin_42178670的博客
05-19 4124
让浮动元素居中的几种方法 方法一： 给浮动元素外层包裹一个div,这个div和浮动元素宽度一致，然后对这个div设置margin: 0 auto; -------html------- <div class="container-layout"> <div class="content clearfix"> <div class="float-item">float-item</div> </div> </di
css文本、盒子、浮动居中方法总结
小黯
06-16 3707
（一）文本居中 <body> <div> <p>这是文本居中</p> </div> </body> 1、文本水平居中： text-align: center; 2、文本垂直居中： line-height: "容器高度"; 3、代码、截图 div{ width: 300px; height: 200px; background-color: red; /* 文本水平居中 */
css如何悬浮然后居中,总结：css保持浮层水平垂直居中的几种方法
weixin_26801149的博客
08-03 2349
1.利用flexbox布局.parent{width: 100%;height: 37.5rem/* 600px */;background: #09c;display: flex;justify-content:center; /* 水平居中 */align-items:center; /* 垂直居中 *//* flex-direction:column; */ /...
【前端】CSS控制DIV浮动层绝对居中定位
姜太小白的博客
12-10 387
下面的写法兼容IE系列浏览器和火狐浏览器。 详细解说，直接看样式： #dingwei{padding:10px;background-color:#003300;color:#FFFFFF; width:600px;height:300px; display:block; position: absolute; top:50%; left:50%; margin-left:-300px; margin-top:-150px;} padding:10px;background-color:#
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值