CSS：兄弟级浮动

最新推荐文章于 2023-12-11 10:31:10 发布
最新推荐文章于 2023-12-11 10:31:10 发布
阅读量347 收藏 2
点赞数
分类专栏： 前端学习 文章标签： css3 css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44179024/article/details/119614452
版权
本文探讨了浮动元素对兄弟元素的影响，特别是当兄弟元素为块级和行级元素时的不同表现。在块级元素情况下，无论是否设定宽高，浮动元素和非浮动元素通常各占一行。而行级元素会围绕浮动元素展现，产生字围现象。理解这些布局原理对于前端开发中的页面布局设计至关重要。
摘要由CSDN通过智能技术生成

兄弟级浮动

当某一个元素浮动时

兄弟级元素为块级元素时

如果块级元素设置了宽高，则效果与平常没有差别，兄弟块级和浮动元素独占一行
如果块级元素没有设置宽高，但是兄弟块级里面有内容撑开，则兄弟块级和浮动元素依然各自独占一行

在这里插入图片描述

兄弟级元素为行级元素时

会出现字围现象
浮动元素和行级元素会同在一行

在这里插入图片描述

兔头迟早要秃头
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
精通css：高级web标准解决方案(第2版)
01-26
- **组合选择器**：如后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器等。 - **伪类和伪元素**：如:hover、:first-child、::before、::after等，用于为特定状态下的元素添加样式。 ### 二、CSS进阶技巧 #...
css笔记
Janeisme3L的博客
12-06 146
css单位 绝对单位：cm、mm、in、pt、pc 相对单位：px（分辨率不同，1px大小也不同） % （width,height,font-size的百分比市相对于父元素的相同属性来计算，line-height的百分比相当于父元素的font-size来计算，vertical-align的百分比市相当于当前元素的line-height来计算） em (相对于当前元素的字体大小而言，如当前元素字体大小是10px 那么1em =10px ,...
【CSS】浮动 ⑦ ( 浮动元素与兄弟容器盒子关系 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-26 456
一、浮动元素与父容器盒子关系 二、代码示例 1、浮动元素 + 浮动元素 2、普通元素 + 浮动元素 3、浮动元素 + 普通元素
HTML：关于浮动，文档流，定位详情
weixin_43394749的博客
09-20 487
1.文档流 所有的元素默认情况下都是在文档流中存在的 文档流是网页的最底层 元素在文档流中的特点： 块元素 1.默认宽度是父元素的全部 2.默认高度被内容（子元素）撑开 3.在页面中自上而下垂直排列 内联元素 1.默认高度和宽度都被内容撑开 2.在页面中自左向右水平排列，如果一行不足以容下所有的元素 则换到下一行继续从左向右 2.浮动 使用float来设置元素的浮动 可选值： none...
子元素超出了父元素的高度_快速学会如何使用CSS组合选择器实现元素的精确选择
weixin_39530647的博客
11-29 431
关系组合选择器说明与实例分析在上文中，主要介绍了基本选择器如类选择器、属性选择器，可以使用这些选择器找到需要设置样式的元素。本文主要介绍CSS关系组合选择器。通过元素间关系确定选择哪个元素进行CSS样式的设置。组合选择器组合选择器主要通过元素与元素之间关系描述，确定需要修改或者需要设置的元素，并对其进行样式的设置。常用组合选择器主要包括后代组合器、子代组合器、一般兄弟组合器、紧邻兄弟组合器、列组合...
css的浮动带来的影响以及解决方法
qq_49171551的博客
07-25 398
3.触发BFC特性（块级格式化上下文,可以将BFC理解为一种属性，拥有了这个属性就可以看成一个独立的渲染区，外面的元素就不会对这个区域产生影响）overflowhidden。1.对兄弟元素也设置浮动例floatleft/right。2.对兄弟元素清除浮动所带来的的影响clearboth。3.触发父元素的BFC特性overflowhidden。1.给父元素设置清除浮动带来的影响clearboth。二、子元素浮动对父元素的影响(塌陷问题)一、浮动元素对兄弟元素影响的解决方法。...
css:从头开始学习CSS
04-17
6. **陷阱**：在学习CSS时，可能会遇到一些常见问题，比如浏览器兼容性问题、浮动元素导致的父元素高度塌陷、盒模型计算不一致等。理解并解决这些问题能提升CSS技能。 7. **位置**：CSS提供了多种定位方式，如静态...
html-css：kimbug讲座
02-16
此外，浮动（float）和定位（positioning）也是布局的重要概念，它们允许元素相对于其父元素或文档流进行位置调整。 CSS选择器的层次和优先级也是讲座中可能涉及的内容。基础选择器（类型、ID、类）是最常见的，而...
精通CSS：高级Web标准解决方案【PDF】
10-04
从简单的类型选择器、ID选择器、类选择器，到更复杂的伪类和属性选择器，以及最新的CSS3选择器，如兄弟选择器和子元素选择器。掌握这些选择器的用法，能够帮助开发者精确地定位并设置网页元素的样式。 布局是CSS中...
HTML-CSS：HTML和CSS的实践
02-24
- **页面布局**：利用CSS调整元素的布局，如浮动(float)、定位(position)和Flexbox或Grid布局。 - **响应式实践**：设计一个适应不同屏幕尺寸的响应式布局，使用媒体查询实现。 - **动画效果**：通过CSS关键帧...
css标签显示模式
Gnemoah6的博客
09-09 1258
标签显示模式 1.1.1） 块级元素（block-level） 常见的块级元素<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>标签是典型的块元素。 块级元素的特点 （1）比较霸道，自己独占一行 （2）高度，宽度，外边距和内边距都可以控制 （3）宽度默认是父元素宽度的100% （4）是一个容器及盒子，里面可以放行内或者块级元素 1.1.2 ）行内元素（inline-level）
css设置兄弟元素样式-兄弟选择器
m0_69439101的博客
04-06 4158
有一种选择器就叫兄弟元素选择器，分为临近兄弟和普通兄弟。临近兄弟（相邻）：用 ＋ 表示，只匹配该元素后边的第一个同级元素。普通兄弟：用 ～ 表示，匹配该元素后边的所有同级元素。
浮动元素与兄弟之间的关系 速记 1211
pyhui的技术博客
12-11 395
标准情况 红浮蓝标 红浮蓝浮 黄盒子加入 标准流的盒子 浮动的粉色盒子来了 现象 跟随在标准流的盒子后面 不会俞越标准流 理解方式 标准流的盒子，是人界 浮动的盒子，是幽灵 当我们进行排队的时候 人，可以抢占幽灵的位置 但是 幽灵是不会占在人的位置的，幽灵惧怕人的阳气 来了一个绿盒子 标准流的 粉色盒子变成了标准流 绿色的盒子会跑到粉色盒子的后面 来了一个金色的盒子排第一个 金色的盒子是标准流 思考，后面的盒子如何排序 原则： 人可以抢幽灵的位置 幽灵一定不会抢人的位置 标准流的盒子会占据
css 获取前后同级兄弟元素的方法
最新发布
jiangjunyuan168的博客
12-11 7000
获取后面的兄弟元素相较于获取前面的兄弟元素来说更简单点，这是浏览器 流布局 所决定的（元素...
浮动（css）
KennGum的博客
06-05 3829
浮动 浮动 通过浮动可使一个元素向其父元素的左侧或右侧移动 float 设置元素的浮动 none 默认值，元素不浮动 left 向左浮动 right 向右浮动 注意： 元素设置浮动后，水平布局的等式不需要强制成立 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置 所以元素下边的还在文档流中的元素会自动向上移动，形成覆盖（不会覆盖文字，可以做文字环绕图片的效果） 浮动的特点： 浮动元素会完全脱离文档流，不再占据文档流中的位置 设置浮动以后元素会向父元素的
css选择器
总结前端开发中遇到的问题，分享前端知识
08-25 6371
通配选择器（Universal selector）作用：选中页面中的所有元素;元素选择器（Type selector）也叫类型选择器、标签选择器
前端css学习之css选择器（列举了多数选择器的使用）
请 端正你的态度的博客
04-29 385
属性选择器 通用选择器 标签选择器 类选择器 id选择器 复合选择器 群组选择器 后代选择器 直接后代选择器 父标签 > 子标签：会选择出第一个子标签。 兄弟选择器 兄弟标签（同级的叫兄弟标签） + 兄弟标签：会选出第一个兄弟标签。 兄弟标签 ~ 兄弟标签：会选出后面所有的兄弟标签。 属性选择器 属性名：如[name] 属性名：如[name=“xx”] 伪类（eg :active）和伪元...
【CSS兄弟选择器】
qq_44847590的博客
12-08 8428
最近写项目时，发现使用兄弟选择器频繁，特此总结一下常用的兄弟选择器，我常用于如果A存在，则给B加特定样式，若A不存在，B是其它样式的情况，使用兄弟选择器很方便，供参考。表示某元素后相邻的兄弟元素，也就是紧挨着的，选中的是单个的。选中h2下面的类名为on的元素 ： h2~.on{ }表示某元素后所有同级的指定元素，选中的是所有的。选中h2下面的第一个p ： h2+p{ }选中h2下面的所有p ： h2~p{ }
CSS学习之浮动元素与兄弟盒子的关系
weixin_44079801的博客
06-26 451
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动元素与兄弟盒子的关系</title> <style> .father{ width: 500px; height: 500px; background-color: pink; } .damao{ float:left; /* 情.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值