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

知识点:

清除(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)相关推荐

css 浮动解决,div+css浮动的解决方法
如何清楚浮动(一) 已知一个大的div容器,这个容器包含了两个子div容器,然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器),清楚浮动的div容器设置css样式为c ...
DIV布局之道四：clear:both清除DIV两侧浮动详解
我们要实现图中表格实现的效果,使用DIV+CSS该如何实现呢? 众所周知,要实现如上效果,我们写一个两行两列的表格,使得表格第二行两个单元格合并即可实现上图效果,可以使用如下代码实现: XML/HTM ...
html 内部浮动外部不,DIV设置浮动后无法撑开外部DIV的解决办法
当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就是说DIV2在这里相当于浮在了页面上方,跟DIV1不在同一个层面,导致了DIV2无法把DIV1给撑开,这是一个老 ...
html的div的间隙,解决DIV浮动间隙
1.解决DIV浮动双倍间距加属性display:inline; 2.Internet Explorer中Float DIV和Clear DIV之间奇怪间隙的Bug Container: paddin ...
解决Div自适应高度的方法（转）
http://www.yutheme.cn/website/index.php/content/view/39/63.html div高度自适应是个比较麻烦的问题,在朋友artery那里看到这个文章, ...
DIV+CSS浮动和定位
浮动 DIV的浮动是指float属性,起初只用于图文排列,但是现在已成为网页上创建多列并排布局的常用工具之一. 下面看几个简单的例子图文排列 <h1>浮动:图文排列</h1> ...
围住浮动元素（消除浮动）的三种方法
浮动多用于多栏布局中,浮动元素脱离了文档流,其父元素看不到它,因而也就不会围住它.为了控制浮动效果,有时候需要清除浮动. 1.对元素浮动 ...
css浮动后页面乱了怎样解决,详解浮动元素引起的问题和解决办法
一.问题多个浮动的元素无法撑开父元素的宽度,父元素的高度可能会变成0. 若浮动元素后面跟非浮动元素,非浮动元素会紧随其后浮动起来. 若浮动元素前面还有同级元素没有浮动则会影响页面结构. 二.解决办法 ...
解决子元素浮动造成父元素高度塌陷的问题学习总结
解决子元素浮动造成父元素高度塌陷的问题的几种方法与BFC原理简释一.解决子元素浮动造成父元素高度塌陷的问题的4种方法 1.直接给父元素设置高度,在子元素改变的情况下,此方法使用起来比较繁杂. 2.给 ...

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

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

最新文章

热门文章