博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于浮动与清除浮动
阅读量:4648 次
发布时间:2019-06-09

本文共 643 字,大约阅读时间需要 2 分钟。

<div class='parent'>

  <div style='float:left'></div>

</div>

当给一个子元素设置浮动属性时,这个子元素就脱离了文档流,从形式上不再属于父元素,因此它的父元素的高度就会受到影响,内容不被撑开,为了清除子元素浮动带来的负面影响,可以有以下方法解决

1,给直接父元素设置inline-block或float属性(不推荐)

2,在浮动的子元素后面加上br标签并设置clear属性,如<br style='clear:both'/>

3,给直接父元素设置伪类,如.parent:after{content:'',display:block;clear:both} (推荐)

后续思考:为什么在浮动的元素后面增加一个元素,且设置clear属性后,父元素的内容高度就会被撑开,因为父元素的高度由最后一个子元素的底(bottom)在页面中的位置决定的。整个页面是坐标,从左上角0,0点开始,所以,从上面的例子看,当子div浮动后,父div没有子元素了,高度就是一条线(如果没有给父元素设置固定高度的话),我们知道如果浮动元素后面还有其他元素,如果不清除浮动,它就会占领浮动元素的位置(往上移),所以在浮动元素后加一个元素,且清除浮动,哪怕它的高度是0,父元素也会被撑开,因为父元素的最后一个子元素保持在页面坐标中的Y值没有变。

转载于:https://www.cnblogs.com/toward-the-sun/p/4734737.html

你可能感兴趣的文章
Sublime Text 3 及Package Control 安装(附上一个3103可用的Key)
查看>>
Get MAC address using POSIX APIs
查看>>
基于uFUN开发板的心率计(一)DMA方式获取传感器数据
查看>>
【dp】船
查看>>
oracle, group by, having, where
查看>>
⑥python模块初识、pyc和PyCodeObject
查看>>
Kibana:分析及可视化日志文件
查看>>
nodejs pm2使用
查看>>
cocos2d-x 3.10 PageView BUG
查看>>
装饰器的基本使用:用户登录
查看>>
CSS选择器总结
查看>>
mysql中sql语句
查看>>
head/tail实现
查看>>
sql语句的各种模糊查询语句
查看>>
vlc 学习网
查看>>
Python20-Day05
查看>>
Real World Haskell 第七章 I/O
查看>>
C#操作OFFICE一(EXCEL)
查看>>
【js操作url参数】获取指定url参数值、取指定url参数并转为json对象
查看>>
移动端单屏解决方案
查看>>