知识点:

清除(clear)的意思可以理解为把这个元素指定方向的内容给移走。例如clear:both; 就是指这个元素左右两边的内容给排除开,相当于这个元素独立成一行,其它元素不管宽度大小,都不能和这个元素并排显示。如果是clear:right;就相当于这个元素右边的内容会被排除开,但是左边的不会,仍然可以在同一行显示。

1.在一个大盒子里面放两个浮动的小盒子,这种情况大盒子会认为自己里面没内容,而恰恰我们不会给大盒子加宽度的。遇到这种问题我们经常用clear来实现!

Document

#div_box{width: 500px;background-color: red;}

#div_left{width: 100px;height: 100px;background-color:#0f0;margin-left:10px;float:left;}

#div_right{width: 100px;height: 100px;background-color:#00f;margin-left:10px;float:left;}

.clear{clear:both;}

大家可以访问我的个人网站:https://www.yykjc.cn  方便大家一起讨论

html id clear,【HTML】解决DIV消除浮动问题(clear)相关推荐

  1. css 浮动 解决,div+css浮动的解决方法

    如何清楚浮动(一) 已知一个大的div容器,这个容器包含了两个子div容器,然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器),清楚浮动的div容器设置css样式为c ...

  2. DIV布局之道四:clear:both清除DIV两侧浮动详解

    我们要实现图中表格实现的效果,使用DIV+CSS该如何实现呢? 众所周知,要实现如上效果,我们写一个两行两列的表格,使得表格第二行两个单元格合并即可实现上图效果,可以使用如下代码实现: XML/HTM ...

  3. html 内部浮动外部不,DIV设置浮动后无法撑开外部DIV的解决办法

    当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就是说DIV2在这里相当于浮在了页面上方,跟DIV1不在同一个层面,导致了DIV2无法把DIV1给撑开,这是一个老 ...

  4. html的div的间隙,解决DIV浮动间隙

    1.解决DIV浮动双倍间距 加属性display:inline; 2.Internet Explorer中Float DIV和Clear DIV之间奇怪间隙的Bug Container: paddin ...

  5. 解决Div自适应高度的方法(转)

    http://www.yutheme.cn/website/index.php/content/view/39/63.html div高度自适应是个比较麻烦的问题,在朋友artery那里看到这个文章, ...

  6. DIV+CSS浮动和定位

    浮动 DIV的浮动是指float属性,起初只用于图文排列,但是现在已成为网页上创建多列并排布局的常用工具之一. 下面看几个简单的例子 图文排列 <h1>浮动:图文排列</h1> ...

  7. 围住浮动元素(消除浮动)的三种方法

    浮动多用于多栏布局中,浮动元素脱离了文档流,其父元素看不到它,因而也就不会围住它.为了控制浮动效果,有时候需要清除浮动. 1.对元素浮动                                 ...

  8. css浮动后页面乱了怎样解决,详解浮动元素引起的问题和解决办法

    一.问题 多个浮动的元素无法撑开父元素的宽度,父元素的高度可能会变成0. 若浮动元素后面跟非浮动元素,非浮动元素会紧随其后浮动起来. 若浮动元素前面还有同级元素没有浮动则会影响页面结构. 二.解决办法 ...

  9. 解决子元素浮动造成父元素高度塌陷的问题学习总结

    解决子元素浮动造成父元素高度塌陷的问题的几种方法与BFC原理简释 一.解决子元素浮动造成父元素高度塌陷的问题的4种方法 1.直接给父元素设置高度,在子元素改变的情况下,此方法使用起来比较繁杂. 2.给 ...

最新文章

  1. C语言日志级别和作用,自己写的C语言通用日志框架,可以控制日志输出等级
  2. 本周值得读:13 份最新开源「Paper + Code」
  3. 把二叉搜索树转换为累加树—leetcode538
  4. 二叉树层次遍历c语言_每日一道 LeetCode (23):二叉树的层次遍历 II
  5. Linux协议栈网桥部分之CAM表操作
  6. script标签中的defer和async属性
  7. 创业企业的破局之道,在于创业者的二层思维
  8. echo输出不重复行到文件 shell_Shell脚本echo指令使用小技巧
  9. linux下解压zip文件命令
  10. sunlight的中文_DianaVickersSunlight中文歌词
  11. Fly.js HTTP 请求解决方案
  12. 数组的下标为什么从0开始而不是从1开始
  13. 【SDOI2009】【BZOJ1227】虔诚的墓主人
  14. Jmeter监控系统资源
  15. 从键盘读入个数不确定的整数,并判断读入的正数和负数的个数,输入为0时结束程序
  16. bigemap卫星地图下载器的优势
  17. 老司机手把手教php,老司机手把手教你玩驱魔!纯小白无脑驱魔攻略
  18. Vue3-pinia(状态管理)
  19. 【LINUX修行之路】——工具篇gcc/g++的使用和自动化构建工具make/makefile
  20. 电脑计算机未指定的错误,Win7系统的电脑为什么会出现未指定的错误

热门文章

  1. 什么样的网站策划最到位?
  2. System.ComponentModel.Win32Exception (0x80004005) 0x80004005
  3. 移动端(浏览器)调试去除模拟器外框
  4. 【2023注册测绘师资格考试综合能力攻略】条件方程数量的计算专题
  5. Linux Mint 20 升级到 Linux Mint 21
  6. 科技与法律的一些思考
  7. java 求正割_Machine Learning 2 - 非线性回归算法分析
  8. 小米手机从相册获照片返回空指针异常
  9. [me]美国的irobot 机器人
  10. python文件作用域是什么_Python中的命名空间、作用域以及locals() 和 globals()