解决浮动带来的一些影响

小鱼儿 2023-01-21 12:22 67阅读 0赞

想起以前一个问题，要对几个元素设置浮动，设置浮动完后，发现最外面的一个div缩回去了，但一时又忘记浮动的属性，结果搞了半天，才发现是浮动这个属性在搞鬼。

实验开始。

那么我一开始先弄好一个大框架，取名div1，不设置高度，然后在这个div1里面在设置两个div，各自取名div2，div3。

Div2设置宽高各100个像素，颜色自己随便，div3表是俺也一样。

下图就是详细代码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MTUyMA_size_16_color_FFFFFF_t_70]  
然后开始设置div1里面的div2和div3。

让后两者浮动，浮起来。Float  
![在这里插入图片描述][20210516084203823.png]  
设置浮动  
![在这里插入图片描述][20210516084207600.png]  
一开始我就没有给div1设置高度，是想用里面的两个div把div1撑起来的。

现在看边框，这个时候div1因为它里面两个div都设置了浮动，所以div1缩到上面去了，这个时候div1就只有宽，没有高了。

然后我们加上after这个元素

content: “”；括号里面怎么都不写的意思就是里面的内容为空白，不往里面添加任何内容

中间的属性表示他的表现形式为块级元素

最后用clear清除浮动  
![在这里插入图片描述][20210516084126162.png]  
大功告成  
![在这里插入图片描述][20210516084121708.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MTUyMA_size_16_color_FFFFFF_t_70]: /images/20221020/e3de15995253463fbd02516f95fb82c2.png
[20210516084203823.png]: /images/20221020/76dd93ea15e3400f966e33d0a50a0cfb.png
[20210516084207600.png]: /images/20221020/c7bd7fc8f5294c09b50d3b32601a6e99.png
[20210516084126162.png]: /images/20221020/a3ab63041e5c4a0e96a09c6895058a23.png
[20210516084121708.png]: /images/20221020/c9e7bbcba3e0452ba5be8bcc7f4a8b59.png

发表评论取消回复

表情：

评论列表（有 0 条评论，67人围观）

还没有评论，来说两句吧...

相关阅读

相关 MySQL配置更改带来的影响及解决策略

MySQL配置更改可能带来以下几种影响： 1. 数据丢失或损坏：如果配置错误导致写入失败，或者重启后数据恢复配置不同，都可能导致数据丢失。 2. 性能下降：配置不当可能会影

超、凢脫俗/ 2025年01月06日 01:18/ 0 赞/ 13 阅读

相关浮动对后面同级元素的影响

浮动对后面同级元素的影响 ![1][] 当前三个元素浮动时，会遮盖后面的div的解决办法: \\1.\\给前三个div增加一个父元素div包裹起来，但是如果父元素

淡淡的烟草味﹌/ 2023年07月25日 06:13/ 0 赞/ 39 阅读

相关解决浮动带来的一些影响

想起以前一个问题，要对几个元素设置浮动，设置浮动完后，发现最外面的一个div缩回去了，但一时又忘记浮动的属性，结果搞了半天，才发现是浮动这个属性在搞鬼。实验开始。那么我

小鱼儿/ 2023年01月21日 12:22/ 0 赞/ 68 阅读

相关 [JavaScript]js单线程，闭包，以及如何处理闭包带来的一些影响

![在这里插入图片描述][20200813104558956.png_pic_center] <table> <thead> <tr> <th>时间</th

r囧r小猫/ 2022年11月27日 03:10/ 0 赞/ 31 阅读

相关解决子元素设置浮动影响父元素问题

例： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/>

灰太狼/ 2022年06月09日 12:10/ 0 赞/ 490 阅读

相关浮动布局float带来的高度塌陷——清除浮动 clearfix

很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。 1）清除浮动

今天药忘吃喽~/ 2022年05月22日 09:52/ 0 赞/ 301 阅读

相关浮动带来的问题，以及清除浮动影响的方式

查阅多篇资料，最初使用浮动float是为了让文字环绕图片，这样显示的效果会更好一点；因为元素使用浮动之后元素就具有了块级元素和行级元素的特点，不仅可以设置宽高也能设置在水平方向

淩亂°似流年/ 2022年05月09日 07:08/ 0 赞/ 340 阅读

相关清除浮动影响

任务描述本关任务：清除浮动。效果如下： ![198872][] 相关知识为了完成本关任务，你需要掌握：1.浮动出现的问题，2.清除浮动的方法。浮动出现的问题

怼烎@/ 2022年04月04日 12:09/ 0 赞/ 262 阅读

相关利用clear清除浮动的一些问题

下面这段代码是用来清除浮动带来的高度塌陷问题 .clearfix:before { content: "."; display: b

小鱼儿/ 2022年03月25日 03:09/ 0 赞/ 189 阅读

相关清除HTML元素浮动带来的影响

一般使用浮动后都要清除，否则后面的元素可能会出现问题。清除浮动并不是指让元素自身没有浮动效果，而是消除元素浮动对其他元素的影响。清除浮动的方法有很多，方式也各有不同。清除浮

爱被打了一巴掌/ 2021年09月20日 15:28/ 0 赞/ 508 阅读