使用浮动撑开块级元素的width

最新推荐文章于 2021-06-03 02:23:30 发布
最新推荐文章于 2021-06-03 02:23:30 发布
阅读量191 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44848423/article/details/112932757
版权

比如对于ul标签，它是块元素，默认和他的父级元素width一样。但是有的时候我们需要ul的宽度被撑开，这个时候给ul添加float:left就行。

无名氏*
关注
【CSS笔记】CSS布局相关属性（显示元素、文本溢出、元素浮动）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-18 402
当子级元素使用浮动属性之后，它的父级元素如果没有设置高度，那么由于浮动元素脱离文档流，不占据文档流的高度，所以从而导致父级元素的高度不能被撑开。CSS可以通过【display】属性来设置HTML元素是否显示，以及显示的方式，是以行内元素显示，还是以块内元素显示，还是以行内块元素显示。也可以设置为none隐藏元素，display设置隐藏元素之后，元素不会占据原先的空间，后面的元素会填充隐藏元素的空间位置。，也就是这个元素不占据原先的空间，后面的元素会填充浮动元素原先的空间。要如何解决父级元素的高度问题呢？..
【CSS】元素的浮动以及高度塌陷
Ala_liu的博客
06-02 619
浮动 高度塌陷 BFC clear after伪类 clearfix
块级元素撑开元素
weixin_30907523的博客
01-03 524
一般行内元素宽度是随内容的宽度改变的，而块级元素都默认是占一行 今天我想聊聊昨天遇到很尴尬的问题：“定位的块级元素”，我在做定位时候，需要弄个边框，定位元素就继承父级的宽度，不能随内容的宽度变化而变化，我还反问同事“块级元素也能随内容撑开？”后来自己想想，联想到“高度塌陷”等之类的问题，才觉得好尴尬。。。 //悬浮框定位 <div class="hoverbox" style="d...
关于浮动撑开父元素宽度的兼容性问题
weixin_34315665的博客
11-15 113
标准参考： 根据 CSS2.1 规范中的描述，浮动元素将尽可能的向左或向右浮动，直到该元素的外边界碰到其包含块的边界或另一个浮动元素的外边界。 换句话说，当浮动元素的包含块能够在横向完全容纳该元素时，该元素不会再继续撑大其包含块。 问题描述： 在 IE6 IE7 IE8(Q) 中，一个右浮动元素将尽可能的向右布局，并撑大其所有宽度为 'auto' 的祖先级元素的宽度，直到遇到一个明...
关于浮动元素宽度自适应父容器宽度的问题
FuChenRenShen的博客
08-31 4990
希望有朋友能帮忙解答！ 自己对于这块的理解：作为一个浮动元素，其应该是脱离了文档流的，而其父容器是属于文档流的，那这个浮动元素的宽度又是根据什么来计算的呢？为什么其脱离了文档流，却会去适应文档流的父容器的宽度呢？样例如下列格式： (样例参照张鑫旭老师《css世界》6.1章节魔鬼属性float 所写，当然前提是排除掉文字不换行和长串英文字符) &lt;div class="parent"&gt...
2021-03-03解决 块级元素设置float导致内容不能撑开，无法显示背景颜色
hk2940153434的博客
04-10 446
标题
子元素用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题
sinat_23668639的博客
02-29 580
方法一： html： 1 1 css： #left1{ float:left;width:200px;} #left2{ float:left;width:200px;} #all1{} 这个方法的关键在于用了clear:both来清除了浮动元素，把父元素all1撑开。 方法二：html：
html div浮动效果,【html】【6】div浮动float
weixin_36323601的博客
06-03 2462
我想 当看完上面的必看链接，拥有一定的基础后也得7天左右，记住 一定要看完，知道它都有什么，没学会不要紧，哪怕只是有个简单的概念也行，随着后续的使用慢慢深入学习，现在开始div布局。必看参考：http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.htmlhttp://paranimage.com/css-float-attribute/ht...
HTML-浮动（特点-影响-居中）-定位
weixin_57218747的博客
04-30 1245
浮动（特点-影响-居中）-定位 1 回顾 1. 盒子模型 1.1 盒子的显示模式 1.2 盒子模型的组成 1.3 盒子的内容区域 1.4 内边距 1.5 边框 1.6 外边距 1.7 溢出内容的显示方式 1.8 如何隐藏元素 2. 默认样式和继承样式 元素本身的样式 > 默认的样式 > 继承的样式 3. 浮动 2 浮动 2.1 浮动的简介 浮动设计的最初想法是为了实现文字环绕图片的效果。 目前浮动成为了前端主流的布局方式。
CSS中Float（浮动）相关技巧文章
10-30
- **宽度设定**：对于浮动元素，必须为其设定宽度，无论是显式指定还是由内容自动撑开。如果不设定宽度，可能会导致布局混乱。 - **容器限制**：浮动元素不能超出其容器的范围，水平方向上它会尽量靠近容器的边缘，...
html中子div用了浮动怎样让父div的大小自动撑开（清除浮动）
asxxf的博客
11-24 1598
html中子div用了浮动怎样让父div的大小自动撑开（清除浮动）
<a>设置长宽
weixin_33980459的博客
09-27 159
因为只有块元素才会有物理属性，在css世界里边，有三种形态的东西，1. 块元素。　特性：有物理属性，width,height写值起作用，而且要占据一行。2. 内联元素。 特性：没有物理属性。但是margin，padding值有用。不占据一行，后边可以有兄弟元素。3. 即是块又是内联，根据兄弟兄弟元素决定。为什么是float之后才会有物理属性，这就是块与内联元素相互转化的问题。块元素 -&gt; 内...
css 父元宽度有子元素撑开
我是渣渣
09-13 2953
//在工作中用到 做个记录//html <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>//css ul{height: 90px;line-height: 90px;overflow-x: scroll; white-space: nowrap;} //隐藏滚动条 ul::-webkit-scrollbar
浮动，影响width:auto块级元素的默认宽度（宽度值与浮动之间的关系）
风动之石的专栏
10-13 2604
如果块级元素的width属性设置为auto的话
子元素浮动后，父元素自动撑开的办法，一般都是高度
xlei1123的博客
01-03 4337
一，子元素最后加上 二，父元素中设置overflow:hidden;属性
父div 自动适应子div 宽度，撑开浏览器的宽度。
h70614959的专栏
07-12 8095
看到标题的时候，一下子不知道说的是什么意思？ 我解释一下： 就是在默认的情况下，当我们设置的时候div的宽度为浏览器的宽度。 现在有这样一个布局： content 出来的效果： 当我拖动滚动条的时候，看到子div 已经超过父div的宽度了。这样很是影响布局效果。 我们可以让父div 不受浏览器的影响。可以让父div脱离文档标准输出流。 效果：
子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度
u013571243的专栏
07-21 3202
一次又一次 http://www.divcss5.com/jiqiao/j612.shtml
前端html——浮动元素撑开父级元素
qq_41141657的博客
02-23 969
1.页面内容 &lt;div id="one"&gt;&lt;/div&gt; &lt;div id="two"&gt;&lt;/div&gt; 2.页面样式 *{ padding: 0; margin: 0; } #one{ width: 1000px; border: 5px solid black; } #two{ width...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值