- CSS float 的疑问 : 当给两个div都设置浮动之后,为什么它们会在同一行显示?
-
MDN:当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。 疑问:MDN中说的是向左或向右移动,一直平移直到碰到了所处的容器的边框。 可是.box2元素为什么是向上移动了吗?CSS权威指南(第三版):"浮动元素会生成一个块级框 , 而不论这个元素本身是什么" 而且float 不为 none 的时候, 元素的 display 计算值为 block ,那这两个div更不应该位于同一行啊?
首先，两个div（块级非置换元素）不会显示在同一行内，这种规则是属于常规流的。对于浮动元素，是不在常规流里面的，因此这种规则是不适合的。浮动盒将被移动至左侧或右侧直至其外侧紧贴包含盒的边缘或另外一个浮动的外边缘。如果存在行盒，浮动盒的顶部外边缘将与行盒的顶部对齐，能并排即是浮动规则使然.
-
- 虚槐若谷 float会使div脱离正常文档流，不单独占一行，可以理解成为了行内元素。不过浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间。且float与position:absolute不同，并不是完全的脱离。使用float要注意存在父元素高度塌陷问题，用完请记得清除浮动(clear等，原理：让添加了clear属性的那个元素的top边缘在某侧或者两侧（看设置的值是left right还是both）浮动元素的底边距之下。)。
- 大约一年之前 回复
-
- li_13579_li “浮动盒将被移动至左侧或右侧直至其外侧紧贴包含盒的边缘或另外一个浮动的外边缘”，.box2在未浮动前位于第二行,在第二行内不就已经紧贴body（也就是.box2的包含盒）的边缘吗?
- 大约一年之前 回复
div（也就是block块元素）独占一行的特性只是在正常的文档流中才有的。
当元素浮动之后，被移出正常的文档流，也就不会独占一行了。
在原本的文档流中box2之所以位于第二行是因为box1独占了第一行。
当box1设置浮动移出正常的文档流后，box2不就在文档流中上移到第一行了么？，之后box2也浮动，也是在第一行的位置浮动。
float会使div脱离正常文档流，不单独占一行，可以理解成为了行内元素。不过浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间。且float与position:absolute不同，并不是完全的脱离。使用float要注意存在父元素高度塌陷问题，用完请记得清除浮动(clear等，原理：让添加了clear属性的那个元素的top边缘在某侧或者两侧（看设置的值是left right还是both）浮动元素的底边距之下。)。
-
- li_13579_li float 不为 none 的时候, 元素的 display 计算值为 block , 能理解成行内元素?
- 大约一年之前 回复
- 其他相关推荐
- HTML关于CSS+DIV浮动的一个疑问
- ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style> #div1 { width:400px; height:300px; background-color:pink; } #div2 { width:150px; height:100px; background-color:green; float : left; } #div3 { width:250px; height:150px; background-color:orange; } #div4 { width:180px; height:130px; background-color:blue; } </style> </head> <body> <div id="div1"> <div id="div2"></div> <div id="div3"> <!-- <div id="div4"></div> --> <a href="#">链接</a> </div> </div> </body> </html> ``` 当div2浮动的时候，div3 就跑到div2下面，因为div2脱离文档流了不占空间，这个我能理解，但是为什么 div3里面的 a标签却不会跑到div2下面呢？然后div3里面注释的div4却会连同div3一起跑到div2下面？ 请高手解答，万分感谢！
- 关于css float属性的疑问？
- <html> <head> <style type="text/css"> #a{background-color:red;color:white;float:left;} #b{background-color:blue;color:white;} </style> </head> <body> <div id="a">a</div> <div id="b">b</div> </body> </html> 以上代码的效果是蓝色的div跟红色div在同一行且在红色div的右边，但是css教程上讲红色div浮动，蓝色div移动到原红色div的位置，从效果上来讲应该是红色的div覆盖了蓝色div才对。 第二：如果给这两个div加上相同的width和height属性值，效果就是红色的div覆盖了蓝色div。 请问大家这是怎么回事？小弟百思不得其解。望大家指点一二。谢谢！
- DIV元素使用浮动时无效的问题
- <div class="div1"> <div class="div2"></div> <div class="div3"></div> </div> div1用margin:0px auto；顶部margin无法消除，可以居中，div2和3用float:left时有效浮动，但是给div2和3设置margin或者padding时，浮动就无效，但请问这是什么原因？
- form中div设置浮动，div元素会向左浮动到哪个元素为止？？
- html： ``` <div class="bj_bai"> <h3 id="login_caption">登录</h3> <form action method="get"> <input type="text" class="kuang_txt" placeholder="登录名"> <input type="password" class="kuang_txt" placeholder="密码"> <div> <input class="" type="checkbox"/> <span>记住我 </span> <a href="">忘记密码？</a> </div> <input type="button" class="btn_zhuce" value="登录"> </form> </div> ``` ``` CSS: .bj_bai{ float: left; width: 314px; height: 408px; padding-left: 50px; background: #FFF; } .kuang_txt{ width: 230px; height: 60px; border: 1px solid #dddddd; background: #faffbd;/*背景色*/ color: #b1a9a9;/*应该是密码的颜色*/ margin-bottom: 30px; line-height: 60px;/*行内块状元素可设置行高*/ padding-left: 4px; } .zhuce_kuang .zc .bj_bai div { float: left; width: 100%; line-height: 43px; } .zhuce_kuang .zc .bj_bai .btn_zhuce { width: 227px; height: 33px; background: #37b5f9; font-size: 14px; line-height: 33px; text-align: center; border: 0px; color: #fff; border-radius: 3px; cursor: pointer; } ```   两种假设： 1.如果包含框是form，那么div浮动应该盖住用户名输入框； 2.如果包含框成了外部的div块，应该盖住登录标题的； 我的感觉： 1.如果”登录“按钮宽度设置小一点的情况下，似乎div块脱离标准文档流，并且脱离form块，后面的块直接跟上向前； 2.如果”登录“按钮宽度设置大一点的情况下，”登录“按钮可以显示在div下面，似乎div块未脱离文档流，还处在form块中。 所以感觉自己糊涂了，现在搞不清楚到底form中div设置浮动，div元素会向左浮动到哪个元素为止，遵从哪些原则？ 不知哪位大神能帮我解答一下，感激不尽~
- 新人求助：关于CSS浮动的问题
- <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #d1{ border:2px solid red; width:200px; height:200px; float:left; } #d2{ border:4px solid black; width:200px; height:200px; } </style> </head> <body> <div id="d1"></div> <div id="d2">你好</div> </body> </html> 问题：id="d2" 的div里面的“你好” 为什么不跟随div上移动呢？ 如果id="d2"设置浮动的话，“你好”二字就跟随移动了呢？
- float为什么要设置两次
- ``` <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="StyleSheet.css" rel="stylesheet" /> <meta charset="utf-8" /> </head> <body> <div id="q"></div> <div id="w"></div> <div id="e"></div> </body> </html> 下面是css代码 body { margin:0; padding :0; } #q { background-color:#888484; margin-left:0px; width:15%; height:700px; float:left; } #w { width:85%; height:50px; background-color:#808080; float:left; } ``` 为什么要设置两次下面的框才会浮动到上面，只设置#w是不会浮上去的 是有什么原理吗？
- CSS浮动为什么不会遮盖同级元素
- ``` <html> <head> <style type="text/css"> img { border:solid 1px green; display:block; } #id1{ float:left; } div{ border:solid 2px blue; } p{ border:solid 1px red; } </style> </head> <body> <div> <img src="/i/eg_cute.gif" /> <img id="id1" src="/i/eg_cute.gif" /> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </div> </body> </html> ```  W3CSchool中讲解CSS定位模块式，float那一节中，明确说对框1进行向左浮动时会遮住框2，原因是浮动后，元素脱离的文档流，不占据空间。为什么我对两张图中的之一进行浮动时，不会遮住另一张图呢？？？浏览器是IE8核心的360浏览器。
- css二级导航浮动问题，为什么二级导航没有浮动
- http://img.mukewang.com/5da0470c0001266411060156.jpg 请问为什么我的二级导航没有浮动起来 http://img2.mukewang.com/5da0462a00010b2309050139.jpg 给定ul宽度的时候才浮起来了 我的一级导航栏不要定宽度也能浮动起来啊这是为什么。哪些错了求解。 <style type="text/css"> li,ul { list-style: none; padding: 0; margin: 0; } .nav{ margin-top: 20px; height: 44px; background: linear-gradient(114deg,#00d0d4 5%,#00c5c3 51%,#9effa4 100%); } .nav .nav_li_div{ position: relative; height: 44px; margin: 0 auto; font-size: 16px; font-weight: bold; } .nav .nav_li_div .nav_li{ position: relative; float: left; height: 44px; width: 60px; text-align: center; line-height: 44px; } .nav .nav_li_div .nav_li a{ display: block; height: 44px; text-decoration: none; color: white; } .nav .nav_li_div .nav_li:hover{ text-decoration: none; color: white; background: #00BCD4; } .nav .nav_li_div .nav_li_active{ background: #00BCD4; } .nav_tag_local{ position: absolute; top: -10px; left: 545px; z-index: 2; } .nav .nav_li_div .nav_li .second_nav_div{ background: white; border: 1px solid #00bcd4; position: absolute; height: 44px; top: 42px; font-size: 14px; z-index: 2; display: block; /* display: none; */ } .nav .nav_li_div .nav_li .second_nav_div li{ float: left; height: 42px; } .nav .nav_li_div .nav_li .second_nav_div li a{ font-size: 12px; text-align: center; color: #666; width: 80px; height: 42px; display: block; line-height: 42px; text-decoration: none; } .nav .nav_li_div .nav_li .second_nav_div li:hover{ background: #E0F7FA; } </style> </head> <body> <div class="nav"> <ul class="nav_li_div"> <li class="nav_li nav_li_active"><a href="">首页</a></li> <li class="nav_li"><a href="">机票</a></li> <li class="nav_li"><a href="">酒店</a></li> <li index="4" class="nav_li"><a href="">团购</a> <ul index="4" class="second_nav_div clear" style="left:0"> <li><a href="">度假团购</a></li> <li><a href="">周边休闲</a></li> <li><a href="">长线游</a></li> </ul> </li> <li index="5" class="nav_li"><a href="">度假</a></li> <li class="nav_li"><a href="">邮轮</a></li> <li index="7" class="nav_li"><a href="">门票</a></li> <li class="nav_li"><a href="">火车票</a></li> <li index="9" class="nav_li"><a href="">攻略</a></li> <li index="10" class="nav_li"><a href="">当地人</a></li> <li index="11" class="nav_li"><a href="">车车</a></li> <li class="nav_li"><a href="">汽车票</a></li> <li class="nav_li"><a href="">境外</a></li> <li class="nav_li"><a href="">保险</a></li
- 令我头痛的CSS浮动问题
- ``` ``` 各位大神最近遇到一个问题找了几天也没找到答案，很困扰啊~~~~ 代码如下，很简单： #king{ border:1px solid #f00; width:500px; height:500px; } #a{ border:1px solid #00f; width:100px; } div.a_son{ float:left; border:1px solid #063; width:40px; height:40px;} #b{ float:left; border:1px solid #0F0; width:100px; height:100px;} <body> <div id="king"> <div id="a" class="crearfix"> <div class="a_son"></div> <div class="a_son"></div> <div class="a_son"></div> <div class="a_son"></div> </div> <div id="b"> </div> </div> </body> 结果是这样的： 请问为什么b框会和顶部离那么一段距离啊~~~~~
- 多个float的div 之间，想强制换行怎么办？
- 多个float的div 之间，想强制换行怎么办？ 如 <STYLE TYPE="text/css"> li {float:left;} </STYLE> <ul> <li>测试1</li> <li>测试2</li> <li>测试3</li> <li>测试4，这个li结束时我想换行</li> <li>测试5</li> <li>测试6，这个li结束我又不想换行</li> <li>测试7</li> </ul> 换行与不换行我可以随时更改，想换就换，想不换就不换, 请高手我该怎么做？ 注：不要告诉我设置width（因为宽度要根据内容而定，li里可能是数据库取出的图片，无法确定宽度) [b]问题补充：[/b] 具体怎么做？该怎么定义样式？ [b]问题补充：[/b] to lovewhzlq :不浮动的话就都换行了， 在这里多个div的布局应该跟多个li的布局差不多吧！ [b]问题补充：[/b] 抛出异常的爱 为正解！ float：none;这个属性之前我很少用~ 但是我想另外问一下，float:none与clear：both的区别是不是这样： float：none，它还是使得这几个li之间还是处于同一层，而clear:both就是使该li没有float出来~~ [b]问题补充：[/b] to lovewhzlq : 您的方法我测试过，还是不能实现我的效果，在这里应该是不能用clear:both吧~~，用了就又乱了，您看看： <STYLE TYPE="text/css"> li {float:left;} .clear{clear:both;float:none;} </STYLE> <ul> <li><img src="http:www.wecoo.com/images/index/top1.jpg" width="73" height="46" /></li> <li><img src="http:www.wecoo.com/images/index/top2.jpg" width="86" height="46" /></li> <li><img src="http:www.wecoo.com/images/index/top3.jpg" width="96" height="46" /></li> <li><img src="http:www.wecoo.com/images/index/top4.jpg" width="126" height="46" /></li> <li><img src="http:www.wecoo.com/images/index/top5.jpg" width="118" height="46" /></li> <li class="clear"><img src="http:www.wecoo.com/images/index/top6.jpg" width="117" height="46" /></li> <li><img src="http:www.wecoo.com/images/index/down1.jpg" width="126" height="44" /></li> <li><img src="http:www.wecoo.com/images/index/down2.jpg" width="163" height="44" /></li> <li><img src="http:www.wecoo.com/images/index/down3.jpg" width="156" height="44" /></li> <li><img src="http:www.wecoo.com/images/index/down4.jpg" width="173" height="44" /></li> </ul> [b]问题补充：[/b] to lovewhzlq : /************************** clear:both; CSS手册上这样解释的：该属性的值指出了不允许有浮动对象的边。 这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除clear:both; ***************************/ 所以我们是不是应该在最后加一个<li style="clear:both;display:none"></li>，不知道大家会不会这样做？ [b]问题补充：[/b] 就是使得ul里面包含了全部的li,而不置于使得float里的内容脱离ul [b]问题补充：[/b] to lovewhzlq : 如果您用firebug hacker的时候，你会发现用了这个与没有用这个的区别：ul的高度会不一样。 我曾经写过一个js向上滚动文字的效果时，发现如果不加这个li在ff,chorm,ie8可以滚动，而在 IE 5 6 7里就不行~~加了这个才行 [b]问题补充：[/b] 哦不是这个： <li style="clear:both;display:none"></li> 是这样，刚才写错了： <div style="clear:both;height:0;width:0"></div>
- span和img设置浮动没反应
- <div style="width:400;height:400"> <span></span> <img src=""/> </div> 我给span加 了 float：left 和display：block 还是没反应
- 一个CSS的样式问题，关于浮动
- Html代码如下 ``` <div id="a"></div> <div id="b"></div> <div id="c"></div> ``` css如下 ``` #a{ background:red; height:100px; width:100px; float:left; } #b{ width:200px; height:200px; background:green; } #c{ background:yellow; width:300px; height:300px; } ``` 我做出来的是 但是书上说的是B在A的右边，求解?用google浏览器，兼容问题？
- div用了浮动，且使用百分比，浏览器缩放布局就乱了，小白一个求大神，挺急的
- questionnaire.css body { /* 这里相对于css文件 */ /* background-image: url(../images/3b77dc0bbd41ef396690eb32a9803998[1].jpg); */ background-color: #E8F2FE; width: 100%; height: 100%; } font { font-family: "楷体";/* Trebuchet MS */ } /* 整个表单作为一个outer*/ .StuQuestionnaire_outer { position: relative; /* height: 100%; */ width: 100%; left: 2%; background-color: #E8F2FE; /* border: 1px red solid; */ } /* 尊敬的女士...开始 */ .StuQuestionnaire_top { /* border: 1px black solid; */ /* position: absolute; */ float: left; width: 90%; height: 10%; border-bottom: 1px #EFEFEF dashed; margin-top: 2%; margin-left: 2%; padding: 1%; } /* 尊敬的女士...结束 */ /****************************/ /* 表单内容开始...开始 */ .StuQuestionnaire_content { /* position: absolute; */ float: left; margin-top: 0%; margin-left: 2%; padding: 1%; width: 90%; /* border: 1px blue solid; */ } /* 表单内容开始...结束 */ /****************************/ /* 一、个人就业信息...开始*/ .StuQuestionnaire_content1_top { float: left; /* border: 1px yellow solid; */ width: 100%; } /* 一、个人就业信息...结束*/ /****************************/ /* 一、个人就业信息问卷内容...开始*/ .StuQuestionnaire_content1_bottom { width: 80%; /* border: 1px black solid; */ float: left; padding: 1%; margin-left: 11%; } /* 一、个人就业信息问卷内容...结束*/ /****************************/ /* 一、个人就业信息问卷内容的每一条...开始*/ .StuQuestionnaire_content1_bottom_div { width: 90%; float: left; padding-left: 1%; /* padding-top: 1%; */ padding-bottom: 1%; /* border: 1px blue solid; */ } .StuQuestionnaire_content1_bottom_div:HOVER { background-color: #EDFAFE; } /* 一、个人就业信息问卷内容的每一条...结束*/ /****************************/ /* 一、个人就业信息问卷内容的每一条的标题...开始*/ .StuQuestionnaire_content1_bottom_div_title { float: left; /* border: 1px red solid; */ width: 20%; } /* 一、个人就业信息问卷内容的每一条的标题...开始*/ /****************************/ /* 一、个人就业信息问卷内容的每一条的input...开始*/ .StuQuestionnaire_content1_bottom_div_input { width: 40%; float: left; } /* 一、个人就业信息问卷内容的每一条的input...结束*/ /****************************/ /* 一、个人就业信息问卷内容的每一条的text...开始*/ .StuQuestionnaire_content1_bottom_div_text { width: 100%; /* color: #A79776; */ } /* 一、个人就业信息问卷内容的每一条的text...结束*/ /****************************/ /* 一、个人就业信息问卷内容的控制信息的图片div..开始 */ .imgDiv { float: left; height: 2.5%; width: 2%; visibility: hidden; margin-left: 1%; } .imgDiv img { height: 100%; background: transparent; /*完全透明*/ opacity: 1; /*整个按钮的不透明度，会影响到文字，0完全透明，1完全不透明*/ background: rgba(255, 255, 255, 0.5); } /* 一、个人就业信息问卷内容的控制信息的图片div..结束 */ .controlMessages { float: left; height: 2.5%; margin-left: 0.5%; } /****************************/ /* 二、工作满意度..开始*/ .StuQuestionnaire_content2_top { float: left; /* border: 1px yellow solid; */ width: 100%; } /* 二、工作满意度..结束*/ /****************************/ /* 二、工作满意度答卷内容...开始*/ .StuQuestionnaire_content2_bottom { width: 98%; /* border: 1px black solid; */ float: left; padding: 1%; } /* 二、工作满意度答卷内容...结束*/ /****************************/ /* 二、工作满意度答卷内容的每一条...开始*/ .StuQuestionnaire_content2_bottom_div { width: 80%; float: left; padding-left: 1%; /* padding-top: 1%; */ padding-bottom: 1%; /* border: 1px red solid; */ border-bottom: 10% red solid; /* border-bottom: 10%; border-bottom-width: 80%; border-bottom-color: black; */ margin-left: 10%; } .StuQuestionnaire_content2_bottom_div:HOVER { background-color: #EDFAFE; /* #EDFAFE*/ } /* 二、工作满意度答卷内容的每一条...结束*/ /****************************/ /* 二、工作满意度答卷内容的每一条的标题...开始*/ .StuQuestionnaire_content2_bottom_div_title { float: left; width: 80%; /* border: 1px red solid; */ margin-left: 1%; } /* 二、工作满意度答卷内容的每一条的标题...开始*/ /****************************/ /* 二、工作满意度答卷内容的每一条的input...开始*/ .StuQuestionnaire_content2_bottom_div_input { width: 78%; float: left; /* border: 1px black solid; */ padding: 1%; margin-left: 1%; } /* 二、工作满意度答卷内容的每一条的input...结束*/ /****************************/ /* 二、工作满意度答卷内容的每一条的input的每个选项...开始*/ .StuQuestionnaire_content2_bottom_input_choose { width: 95%; float: left; /* border: 1px red solid; */ margin-bottom: 1%; margin-left: 1%; } .StuQuestionnaire_content2_bottom_input_choose:HOVER { background-color: #EFEFEF; cursor: pointer; } /* 二、工作满意度答卷内容的每一条的input的每个选项...开始*/ .StuQuestionnaire_content2_bottom_input_choose input { width: 3%; height: 2.5%; float: left; /* border-radius: 100%; */ -webkit-box-shadow: 0% 18% 30% rgba(0, 0, 0, 0.5); -moz-box-shadow: 0% 18% 30% rgba(0, 0, 0, 0.5); box-shadow: 0% 18% 30% rgba(0, 0, 0, 0.5); background: #ddd; } .StuQuestionnaire_content2_bottom_input_choose label { float: left; margin-left: 0.5%; } /**设置红色字体**/ .redFont { color: red; } .StuQuestionnaire_content2_bottom_submit { width: 80%; float: left; padding-left: 1%; /* padding-top: 1%; */ padding-bottom: 1%; /* border: 1px red solid; */ margin-left: 10%; } .StuQuestionnaire_content2_bottom_div_submit { width: 78%; float: left; padding: 1%; margin-left: 1%; } .StuQuestionnaire_content2_bottom_div_submit input { background-color: #DEDEDD; float: left; height: 30px; width: 8%; margin-left: 40%; } .StuQuestionnaire_content2_bottom_div_submit input:HOVER { cursor: pointer; position: relative; -webkit-animation-name: buzz-out; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; top: 2%; margin-left: 40.5%; margin-top: 0.5%; } .StuQuestionnaire_content2_bottom_div_submit input:AFTER { cursor: pointer; position: relative; top: 0%; left: 0%; }
- CSS浮动问题急求解答！！！！！！！！！
- ``` <html> <head> <style type="text/css"> *{ padding:0px; margin:0px;} #king{ border:1px solid #f00; width:500px; height:500px; margin-left:100px; margin-top:100px;} #a{ border:1px solid #00f; width:100px; } div.a_son{ float:left; border:1px solid #063; width:40px; height:40px;} #b{ float:left; border:1px solid #0F0; width:100px; height:100px;} </style> </head> <body> <div id="king"> <div id="a"> <div class="a_son"></div> <div class="a_son"></div> <div class="a_son"></div> <div class="a_son"></div> </div> <div id="b"> </div> </div> </body></html> ``` 运行结果是这样的： 为什么b框离顶部会有一段距离啊？？？？？我觉得b框应该飘到最顶端才对啊~~~
- css浮动问题大家看看吧
- <div style="height: 200px; width: 200px;"> <span style="float: left; width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red; background-color: Olive;">浮动元素span</span> </div> <div style="height: 200px; width: 200px;"> <span style="width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red; background-color: Olive;">浮动元素span</span> </div> ! [为什么会呈现这种效果](正确理解 clear:both_天地南羽_新浪博客 http://blog.sina.com.cn/s/blog_709475a10100wkdj.html)
- 求解答解答CSS浮动问题，很头疼啊
- 各位大神最近遇到一个问题找了几天也没找到答案，很困扰啊~~~~ 代码如下，很简单： #king{ border:1px solid #f00; width:500px; height:500px; } #a{ border:1px solid #00f; width:100px; } div.a_son{ float:left; border:1px solid #063; width:40px; height:40px;} #b{ float:left; border:1px solid #0F0; width:100px; height:100px;} <body> <div id="king"> <div id="a"> <div class="a_son"></div> <div class="a_son"></div> <div class="a_son"></div> <div class="a_son"></div> </div> <div id="b"> </div> </div> </body> 结果是这样的： 请问为什么b框会和顶部离那么一段距离啊~~~~~
- 为什么用了浮动，内容就从div里溢出来了？
- ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>北斗之芯</title> <link href="index.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="header"> <div id="header_left"><h1>北斗之芯</h1></div> <div id="header_center"><p><img src="images/beidouzhixin.png" width="140" height="100" alt="北斗之芯协会图标" title="北斗之芯"/></p></div> <div id="header_right"> <div id="search_box"> <form id="search_form" method="post" action="#"> <input type="text" id="s" value="搜索" class="swap_value" width="159" height="24"/> <input type="image" src="images/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search"/> </form> </div> </div> </div> <div class="clear"></div> <div id="daohang"> <ul><a href="#">首页</a></ul> <ul><a href="#">学习天地</a></ul> <ul><a href="#">经典教材</a></ul> <ul><a href="#">留言板</a></ul> <ul><a href="#">联系我们</a></ul> <ul><a href="#">关于我们</a></ul> </div> </div> <div id="tupian"> <p><img src="images/tupian01.png" width="100%" alt=“今天做别人不想做的事情，明天做别人不能做的事情" title="今天做别人不想做的事情，明天做别人不能做的事情"></p> </div> <div class="clear"></div> <div id="fenzu"> <div id="ruanjianzu"> <div class="tupian"><img src="images/ruanjianzu.jpg" alt="软件组图片" title="软件组" width="75" height="100" /></div> <div class="wenzi"><p><h3>软件组</h3>主要从事手机软件开发，主要学习java、Android、PHP</p></div> </div> <div id="jiaoshizu"> <div class="tupian"><img src="images/jiaoshi.png" title="一流的师资" alt="一流的师资" width="75" height="100"></div> <div class="wenzi"><p><h3>优质师资</h3>井冈山大学信息工程系主任刘清老师<br/>理事长：刘庆梁 副理事长：童嘉欣</p></div> </div> <div id="yingjianzu"> <div class="tupian"><img src="images/yingjianzu.png" title="硬件组" alt="硬件组图片" width='75' height="100"/> </div> <div class="wenzi"><p><h3>硬件组</h3>主要从事硬件开发，拥有美国进口机器人、3D打印机等一系列先进高科技设备</p></div> </div> </div> <div class="clear"></div> <div id="jiaoxue"> <div id="kechengshezhi"> <ul> <li><span style:font-size:24px;>课程设置</span></li> <li>JAVA</li> <li>Android</li> <li>PHP</li> <li>单片机</li> <li>3D打印</li> <li>智能机器人</li> </ul> </div> <div id="jianjie"> <h3 style="color:red;text-align:center;vertical-align:middle;">北斗之芯协会</h3> <p> 井冈山大学北斗之芯协会，成立于2013年，学术科技类社团，隶属于井冈山大学学生社团联合会，北斗之芯协会担负着为北斗之芯实验室输送人才的任务，北斗依托电子与信息工程学院，由信息工程系主任刘清担任指导老师，社团由理事会组织管理。设有理事长、副理事长及相关部门。 </p> </div> <div id="jingdianjiaocai"> <ul> <li><span style:font-size:24px;>经典教材</span></li> <li>《java入门到精通》</li> <li>《Android核心科技》</li> <li>《细说PHP》</li> <li>《51单片机教程》</li> <li>《3D打印入门到精通》</li> <li>《疯狂机器人》</li> </ul> </div> </div> </body>> </html> 以上是html文件 body {background-image:url(images/blue.gif);} #search_box{width:201px;height:31px;background:url(bg_search_box.gif);float:right} #search_box #s{ float:left; padding:0px; margin:6px 0px 0px 6px; border:0px; width: 159px; background:none; font-size:14px; } #search_box #go{float:right;margin:6px 4px 0 0;} #header{width:100%; border:hidden; margin-top:0px; margin-right:auto;background-color:none;height:80px;position:fixed z-index:10000;} #header_left{ width:40%;float:left;margin-top:20px;} #header_left h1{font-size:40px;color:#FFFFFF;text-align:left;vertical-align:middle;} #header_center{width:30%;float:left} #header_center p{text-align:left;vertical-align:middle;} #header_right{width:30%;float:right;margin-top:20px;} .clear{ clear:both; margin:0px; padding:0px; } #daohang{ background-color:#0033FF; border:1px,#000,solid; float:left; width:100%; } #daohang ul{ float:left;list-style-type:none;border:1px solid #FFF;width:100px;font-size:21px;text-decoration:none;text-align:center; margin:2px auto;color:#FFFFFF;display:block;} #daohang ul a{ color:#FFFFFF; text-decoration:none; } a:hover{color:#66FF99;} #fenzu{background-color:#FFFFFF;margin:auto aauto;padding:10;} #ruanjianzu{ background-color:#FFFFFF; float:left; width:32%;height:115px; text-align:center;vertical-align:middle; margin::auto 0px; } #jiaoshizu{ background-color:#FFFFFF; float:left; width:33%;height:115px; text-align:center;vertical-align:middle; margin::auto 0px; } #yingjianzu{ background-color:#FFFFFF; float:left; width:35%;height:115px; text-align:center;vertical-align:middle; margin::auto 0px; } .tupian{float:left; margin:auto 0; padding:10px;height:100px;} .wenzi{float:left;text-align:center;vertical-align:middle;height:100px;} #jiaoxue{background-image:url(images/baizhuan.gif);width:100%;height:150px; z-index:10000} #kechengshezhi{float:left;width:27%;} #jianjie{float:left;width:46%;} #jingdianjiaocai{float:left;width:27%;} li{display:block;border-top:border:1px solid #FFF;} ```
- 关于css三栏布局有浮动放在下面就会出错
- 在css三栏布局中左浮动，右浮动，中间宽度自适应 css: div{ padding: 20px; } .main{ width: 920px; height: 400px; border: 1px solid #999; background-color: #eee; position: relative; left: 150px; top: 100px; } .top{ float: left; width: 200px; height: 80px; background-color: black; border: 1px solid #999; } .top-in{ width:80px; height: 80px; border: 1px solid #999; } .center{ border: 1px solid #999; background-color: white; height: 320px; margin-left: 260px; margin-right:180px; } .right{ margin: 0px; float:right ; border: 1px solid #999; height: 100px; width: 120px; background-color: white; } //----------------------------------------- <div class="main"> <div class="right"> </div> <div class="top"> </div> <div class="center"> </div> </div> 这样是没问题的，但是如果div写成这样 <div class="main"> <div class="top"> </div> <div class="center"> </div> <div class="right"> </div> </div> 就是将左右浮动位置调换，就会出现以下状况，求大神解释 
- 关于CSS中触发bfc之前的问题和bfc的特性疑问
- 网上都是介绍bfc的，那么触发bfc之前是什么情况呢 bfc特性之一：每个元素的margin box的左边， 与包含块border box的左边相接触。 但是下面这种情况貌似就不符合了啊，浮动的子元素不就把父级与另一个子级分开了吗，难道我理解偏了，求大大解惑 ``` <div style="width: 100%; height: 400px; background-color: green;overflow: hidden;"> <div style="float: left; width: 200px; height: 300px; background-color: yellow;"></div> <div style="background-color: pink; height: 100%; overflow: hidden;"></div> </div> ```
- 终于明白阿里百度这样的大公司，为什么面试经常拿ThreadLocal考验求职者了
- 点击上面↑「爱开发」关注我们每晚10点，捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类，各个线程都拥有一份线程私有的数
- 程序员必须掌握的核心算法有哪些？
- 由于我之前一直强调数据结构以及算法学习的重要性，所以就有一些读者经常问我，数据结构与算法应该要学习到哪个程度呢？，说实话，这个问题我不知道要怎么回答你，主要取决于你想学习到哪些程度，不过针对这个问题，我稍微总结一下我学过的算法知识点，以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的，并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构，当然，我也会整理一些看过...
- 《奇巧淫技》系列-python！！每天早上八点自动发送天气预报邮件到QQ邮箱
- 此博客仅为我业余记录文章所用，发布到此，仅供网友阅读参考，如有侵权，请通知我，我会删掉。 补充 有不少读者留言说本文章没有用，因为天气预报直接打开手机就可以收到了，为何要多此一举发送到邮箱呢！！！那我在这里只能说：因为你没用，所以你没用！！！ 这里主要介绍的是思路，不是天气预报！不是天气预报！！不是天气预报！！！天气预报只是用于举例。请各位不要再刚了！！！ 下面是我会用到的两个场景： 每日下
- 面试官问我：什么是消息队列？什么场景需要他？用了会出现什么问题？
- 你知道的越多，你不知道的越多 点赞再看，养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式，欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛，几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸，打败了无数
- 8年经验面试官详解 Java 面试秘诀
- 作者 | 胡书敏 责编 | 刘静 出品 | CSDN（ID：CSDNnews） 本人目前在一家知名外企担任架构师，而且最近八年来，在多家外企和互联网公司担任Java技术面试官，前后累计面试了有两三百位候选人。在本文里，就将结合本人的面试经验，针对Java初学者、Java初级开发和Java开发，给出若干准备简历和准备面试的建议。 Java程序员准备和投递简历的实
- 究竟你适不适合买Mac？
- 我清晰的记得，刚买的macbook pro回到家，开机后第一件事情，就是上了淘宝网，花了500元钱，找了一个上门维修电脑的师傅，上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷，只是想要个固态硬盘的笔记本，用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后，最终决定，还是买个好（xiong）看（da）的。 已经有好几个朋友问我mba怎么样了，所以今天尽量客观
- 程序员一般通过什么途径接私活？
- 二哥，你好，我想知道一般程序猿都如何接私活，我也想接，能告诉我一些方法吗？ 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”，还有很多读者问过我类似这样的问题。 我接的私活不算多，挣到的钱也没有多少，加起来不到 20W。说实话，这个数目说出来我是有点心虚的，毕竟太少了，大家轻喷。但我想，恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉，我也算是有经验的人了。 唾弃接私活、做外
- 大学四年自学走来，这些珍藏的「实用工具/学习网站」我全贡献出来了
- 知乎高赞：文中列举了互联网一线大厂程序员都在用的工具集合，涉及面非常广，小白和老手都可以进来看看，或许有新收获。
- 《阿里巴巴开发手册》读书笔记-编程规约
- Java编程规约命名风格 命名风格 类名使用UpperCamelCase风格 方法名,参数名,成员变量,局部变量都统一使用lowerCamelcase风格 常量命名全部大写,单词间用下划线隔开, 力求语义表达完整清楚,不要嫌名字长 ...
- Python爬虫爬取淘宝，京东商品信息
- 小编是一个理科生，不善长说一些废话。简单介绍下原理然后直接上代码。 使用的工具（Python+pycharm2019.3+selenium+xpath+chromedriver）其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip install selenium -i https://pypi.tuna.tsinghua.edu.cn/simple/
- 阿里程序员写了一个新手都写不出的低级bug，被骂惨了。
- 你知道的越多，你不知道的越多 点赞再看，养成习惯 本文 GitHub https://github.com/JavaFamily 已收录，有一线大厂面试点思维导图，也整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。 前前言 为啥今天有个前前言呢？ 因为你们的丙丙啊，昨天有牌面了哟，直接被微信官方推荐，知乎推荐，也就仅仅是还行吧（心里乐开花）
- Java工作4年来应聘要16K最后没要,细节如下。。。
- 前奏： 今天2B哥和大家分享一位前几天面试的一位应聘者，工作4年26岁，统招本科。 以下就是他的简历和面试情况。 基本情况： 专业技能： 1、 熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、 熟悉常用项目管理工具：SVN、GIT、MAVEN、Jenkins 3、 熟悉Nginx、tomca
- Python爬虫精简步骤1 获取数据
- 爬虫的工作分为四步： 1.获取数据。爬虫程序会根据我们提供的网址，向服务器发起请求，然后返回数据。 2.解析数据。爬虫程序会把服务器返回的数据解析成我们能读懂的格式。 3.提取数据。爬虫程序再从中提取出我们需要的数据。 4.储存数据。爬虫程序把这些有用的数据保存起来，便于你日后的使用和分析。 这一篇的内容就是：获取数据。 首先，我们将会利用一个强大的库——requests来获取数据。 在电脑上安装
- Python绘图，圣诞树，花，爱心 | Turtle篇
- 1.画圣诞树 import turtle screen = turtle.Screen() screen.setup(800,600) circle = turtle.Turtle() circle.shape('circle') circle.color('red') circle.speed('fastest') circle.up() square = turtle.Turtle()
- 作为一个程序员，CPU的这些硬核知识你必须会！
- CPU对每个程序员来说，是个既熟悉又陌生的东西？ 如果你只知道CPU是中央处理器的话，那可能对你并没有什么用，那么作为程序员的我们，必须要搞懂的就是CPU这家伙是如何运行的，尤其要搞懂它里面的寄存器是怎么一回事，因为这将让你从底层明白程序的运行机制。 随我一起，来好好认识下CPU这货吧 把CPU掰开来看 对于CPU来说，我们首先就要搞明白它是怎么回事，也就是它的内部构造，当然，CPU那么牛的一个东
- 破14亿，Python分析我国存在哪些人口危机！
- 2020年1月17日，国家统计局发布了2019年国民经济报告，报告中指出我国人口突破14亿。 猪哥的朋友圈被14亿人口刷屏，但是很多人并没有看到我国复杂的人口问题：老龄化、男女比例失衡、生育率下降、人口红利下降等。 今天我们就来分析一下我们国家的人口数据吧！ 更多有趣分析教程，扫描下方二维码关注vx公号「裸睡的猪」 即可查看！ 一、背景 1.人口突破14亿 2020年1月17日，国家统计局发布
- 听说想当黑客的都玩过这个Monyer游戏（1~14攻略）
- 第零关 进入传送门开始第0关（游戏链接） 请点击链接进入第1关： 连接在左边→ ←连接在右边 看不到啊。。。。（只能看到一堆大佬做完的留名，也能看到菜鸡的我，在后面~~） 直接fn+f12吧 <span>连接在左边→</span> <a href="first.php"></a> <span>←连接在右边</span> o
- 在家远程办公效率低？那你一定要收好这个「在家办公」神器！
- 相信大家都已经收到国务院延长春节假期的消息，接下来，在家远程办公可能将会持续一段时间。 但是问题来了。远程办公不是人在电脑前就当坐班了，相反，对于沟通效率，文件协作，以及信息安全都有着极高的要求。有着非常多的挑战，比如： 1在异地互相不见面的会议上，如何提高沟通效率？ 2文件之间的来往反馈如何做到及时性？如何保证信息安全？ 3如何规划安排每天工作，以及如何进行成果验收？ ......
- 作为一个程序员，内存和磁盘的这些事情，你不得不知道啊！！！
- 截止目前，我已经分享了如下几篇文章： 一个程序在计算机中是如何运行的？超级干货！！！ 作为一个程序员，CPU的这些硬核知识你必须会！ 作为一个程序员，内存的这些硬核知识你必须懂！ 这些知识可以说是我们之前都不太重视的基础知识，可能大家在上大学的时候都学习过了，但是嘞，当时由于老师讲解的没那么有趣，又加上这些知识本身就比较枯燥，所以嘞，大家当初几乎等于没学。 再说啦，学习这些，也看不出来有什么用啊！
- 别低估自己的直觉，也别高估自己的智商
- 所有群全部吵翻天，朋友圈全部沦陷，公众号疯狂转发。这两周没怎么发原创，只发新闻，可能有人注意到了。我不是懒，是文章写了却没发，因为大家的关注力始终在这次的疫情上面，发了也没人看。当然，我...
- 这个世界上人真的分三六九等，你信吗？
- 偶然间，在知乎上看到一个问题 一时间，勾起了我深深的回忆。 以前在厂里打过两次工，做过家教，干过辅导班，做过中介。零下几度的晚上，贴过广告，满脸、满手地长冻疮。 再回首那段岁月，虽然苦，但让我学会了坚持和忍耐。让我明白了，在这个世界上，无论环境多么的恶劣，只要心存希望，星星之火，亦可燎原。 下文是原回答，希望能对你能有所启发。 如果我说，这个世界上人真的分三六九等，
- 为什么听过很多道理，依然过不好这一生?
- 记录学习笔记是一个重要的习惯，不希望学习过的东西成为过眼云烟。做总结的同时也是一次复盘思考的过程。 本文是根据阅读得到 App上《万维钢·精英日课》部分文章后所做的一点笔记和思考。学习是一个系统的过程，思维模型的建立需要相对完整的学习和思考过程。以下观点是在碎片化阅读后总结的一点心得总结。
- B 站上有哪些很好的学习资源?
- 哇说起B站，在小九眼里就是宝藏般的存在，放年假宅在家时一天刷6、7个小时不在话下，更别提今年的跨年晚会，我简直是跪着看完的！！ 最早大家聚在在B站是为了追番，再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频，最近两年我和周围的朋友们已经把B站当作学习教室了，而且学习成本还免费，真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ﾉ 下面我们就来盘点一下B站上优质的学习资源： 综合类 Oeasy： 综合
- 如何优雅地打印一个Java对象？
- 你好呀，我是沉默王二，一个和黄家驹一样身高，和刘德华一样颜值的程序员。虽然已经写了十多年的 Java 代码，但仍然觉得自己是个菜鸟（请允许我惭愧一下）。 在一个月黑风高的夜晚，我思前想后，觉得再也不能这么蹉跎下去了。于是痛下决心，准备通过输出的方式倒逼输入，以此来修炼自己的内功，从而进阶成为一名真正意义上的大神。与此同时，希望这些文章能够帮助到更多的读者，让大家在学习的路上不再寂寞、空虚和冷。 ...
- 雷火神山直播超两亿，Web播放器事件监听是怎么实现的？
- Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题，让视音频内容可以不依赖用户安装App，就能进行播放以及在社交平台进行传播。在视频业务大数据平台中，播放数据的统计分析非常重要，所以Web播放器在使用过程中，需要对其内部的数据进行收集并上报至服务端，此时，就需要对发生在其内部的一些播放行为进行事件监听。 那么Web播放器事件监听是怎么实现的呢？ 01 监听事件明细表 名
- 3万字总结，Mysql优化之精髓
- 本文知识点较多，篇幅较长，请耐心学习 MySQL已经成为时下关系型数据库产品的中坚力量，备受互联网大厂的青睐，出门面试想进BAT，想拿高工资，不会点MySQL优化知识，拿offer的成功率会大大下降。 为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行，数据库的中的数据会越来越多，处理时间会相应变慢 数据是存放在磁盘上的，读写速度无法和内存相比 如何优化 设计
- Linux 命令（122）—— watch 命令
- 1.命令简介 2.命令格式 3.选项说明 4.常用示例 参考文献 [1] watch(1) manual
- Linux 命令（121）—— cal 命令
- 1.命令简介 2.命令格式 3.选项说明 4.常用示例 参考文献 [1] cal(1) manual
- 记jsp+servlet+jdbc实现的新闻管理系统
- 1.工具：eclipse+SQLyog 2.介绍：实现的内容就是显示新闻的基本信息，然后一个增删改查的操作。 3.数据库表设计 列名 中文名称 数据类型 长度 非空 newsId 文章ID int 11 √ newsTitle 文章标题 varchar 20 √ newsContent 文章内容 text newsStatus 是否审核 varchar 10 news...
- Python新型冠状病毒疫情数据自动爬取+统计+发送报告+数据屏幕（三）发送篇
- 今天介绍的项目是使用 Itchat 发送统计报告 项目功能设计： 定时爬取疫情数据存入Mysql 进行数据分析制作疫情报告 使用itchat给亲人朋友发送分析报告（本文） 基于Django做数据屏幕 使用Tableau做数据分析 来看看最终效果 目前已经完成，预计2月12日前更新 使用 itchat 发送数据统计报告 itchat 是一个基于 web微信的一个框架，但微信官方并不允
