float样式对DIV的影响

最新推荐文章于 2020-04-09 11:45:30 发布
最新推荐文章于 2020-04-09 11:45:30 发布
阅读量276 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_19467/article/details/82436490
本文探讨了浮动样式如何影响DIV元素的布局，通过实例展示了当DIV应用了float:left属性时，其高度与内容区域的高度保持一致，导致按钮无法正确定位至预期位置的现象。为解决此类布局问题提供了可行的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

[size=large][color=blue]Float样式对DIV的影响[/color]


示例: 下图中的"在首页中预览"按钮本应该是放在行业目录内容的DIV的正下方，但是因为行业目录内容的div的样式中带有float:left属性，做这个div被悬浮起来了，导致按钮的height属性与行业目录的height属性相同：
.sideproNavBox {width: 245px; height: 243px; float:left; margin-top: 10px;}


因图片多不方便上传，详细内容请下载附件。[/size]
解决float属性影响后续元素排版的问题
u012183426的博客
08-19 1765
一：解决后续元素不会另起行显示： 1.在该元素后面新加div 2.并设置clear:both属性 二：早期版本的IE在float中的BUG： 1.块元素 2.float: left; 3.margin-left不为0 margin-left会double 解决办法是：...
CSS float影响下面div布局
Hello_Lisa
07-06 3259
要在使用float后加上一个空白的div，其css属性为clear： <div class="clear"></div> 其 css要用 ： .clear { clear: both; }
float 造成div错位问题
blue2048
10-23 1460
我们控制页面div时经常会使用float来控制浮动效果，但是如果一个div内所有元素都浮动了，我们会发现了里面的元素并没有将外部的div元素[i]撑开[/i][b][/b]，实际上，这是应为浮动元素不在正常的页面文档流中造成的 解决办法也很简单，在div中再加入一个div元素，设置其css属性，clear=both即可...
在css中position与float对样式影响的不同
唐鑫的博客
01-16 588
在css中position与float对样式影响的不同 在css中，position和float都是用于布局比较常用的方法，虽然有时效果一样，但是在某种情况下position比float更加好用，实例如下。 在Htlm代码中封装一个大盒子为父级元素，其中放置4个类名不相同的小盒子为子级元素如下 <!doctype html> <html> <head&.
css/div做的连续几个div水平浮动(float)元素时，当浏览器窗口缩小的时候，浮动元素就往下跑了
剑雪封喉
04-09 2148
注意：div 布局时用float时： css/div做的连续的几个div水平浮动(float)时，当左右浮动的时候怎么当浏览器的窗口缩小的时候浮动的就往下跑了 这是一定要在最外套的div要有固定的width才行。这样就绝对不会往下跑了 ...
子Div使用Float后撑开父Div的几种方法
01-21
} #div2,#div3{float:right;border:1px solid blue;} </style> <div id=”div1″> <div id=”div2″>two</div> <div id=”div3″>one</div> </div> 如果想要撑开父元素可以采用以下方法： 方法一： 父元素...
如何终止DIV的float属性简单实现
09-25
2. 在HTML中，当需要结束浮动影响时，插入一个带有`.clear_float`类的空`<div>`元素： ```html <div class="clear_float"></div> ``` 这个`<div>`将创建一个新的块级上下文，阻止后续的元素继续环绕浮动元素，...
通过float实现两个div不换行
09-25
在这个例子中，我们没有对`div#row2`设置`float:right`，但它依然可以作为参考，如果需要将`row2`放在`row1`的右边，只需将颜色改为红色并添加`float:right`。 3. `float: none;` 默认情况下，所有元素的`float`...
float对div宽度的影响
cangowu的博客
02-29 4097
大部分时间，大家可能在重构的时候，都是先限制了div的宽度了的，但是很多时候没有必要这样做，利用float就可以很好的解决这个问题： 1.div宽度 默认情况下，div的宽度是自适应auto的，在没有设置float的情况下，宽度是自动调整最大化，设置float之后，宽度自动调整最小化。如下图： 2.div高度 是否设置float属性，高度都是自动调整最小化。 3.示例代码
HTML-怎么取消float对下一个div的影响
GHL1996的博客
10-14 4747
问题 我们在html布局中往往会遇到这样的问题，在一个div中我们要分为上中下三部分，中间部分要设置多个小的div，这些div需要左右排列，我们会用float设置他们的浮动。而当我们要在下面继续写第三个div时就会发现，下面的第三个div会无视中间部分而和上面的div产生位置关系 例如下面这个例子（我想分成三部分上面是红色块，中间为并列四个黄色块，下面为蓝色块） style&amp;amp;amp;amp;gt; .a{ ...
float对内联元素和块元素的影响
messenger的博客
05-29 5277
原文链接：https://my.oschina.net/jing31/blog/6601       float属性还没有彻底了解，因为遇到了float之后会导致width自适应最小化的问题，所以找到这篇文章。 一直以为float属性不会对div的宽度或高度有什么影响.但是,这两天我发 现在float对div宽度的影响是显著的. 首先div的默认宽度是widt
DIV + CSS浮动属性Float详解
xlxying的专栏
09-22 2758
原文地址：http://blog.sina.com.cn/bpfc 什么是CSS Float？   float是css的定位属性。在传统的印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里
css - 防止float浮动效果影响下面div布局
热门推荐
Beluga_白鲸
09-03 1万+
为了防止float，min-height等具有浮动效果的代码影响上下的div样式布局，可以要加上一个空白的div，其css属性为clear 其 css要用 ： .clear { clear: both; }
怎么解决float影响div布局问题
weixin_30319097的博客
05-28 412
可以用一个空的div块儿，设置class为clear <div class="clear"><div> 然后在使用了float浮动的块儿的末尾加上这个空div块 再设置它的属性 <style> .clear{ clear:both; } <style> 这样就可以清楚以上div中设置的效果了。。。 转载于:https://www.c...
DIV CSS用float时引起背景不正常显示的解决办法
攻城狮Luke
01-07 5553
当div里面套嵌多个用float定义的层是，背景图没有办法在firefox里面显示。 上网搜了一下才找到解决的方法。 　　div+css布局无法避免的冗余标签完全严格按照w3c的标准来布局是不可能的，想要在不同版本的浏览器下都表现出漂亮的网页，几乎无可避免地要使用一些多余的标签。 　　总结而言，div布局必须用到冗余标签的地方主要有三个： 　　一是背景图和背景色，当内层元素
div css用float时引起背景不正常显示的解决办法
Quincy.Coder的博客
08-29 2331
当div里面套嵌多个用float定义的层是，背景图没有办法在firefox里面显示。上网搜了一下才找到解决的方法。　　div+css布局无法避免的冗余标签，完全严格按照w3c的标准来布局是不可能的，想要在不同版本的浏览器下都表现出漂亮的网页，几乎无可避免地要使用一些多余的标签。　　总结而言，div布局必须用到冗余标签的地方主要有三个： 　　一是背景图和背景色，当内层元素的css属性全部为“floa
分析float样式对DIV布局的影响及应用
标题“float样式对DIV的影响”涉及的是在HTML和CSS中，浮动（float）属性是如何作用于块级元素（如<div>）的布局与定位的。CSS中的浮动是一种布局机制，使得元素脱离正常的文档流，并向左或向右移动，直到其外边缘...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值