Web前端 学习知识点总结（一）HTML基本标签. Web前端 学习知识点总结（二）之Form和Css选择器. Web前端 学习知识点总结（三）Css字体、文本样式以及盒子模型. Web前端 学习知识点总结（四）之display 和 float. Web前端 学习知识点总结（五）qq导航条案例，使用min-width解决留白. Web前端 学习知识点总结（六）定位position. Web前端 学习知识点总结（七）Css3动画animation. Web前端 学习知识点总结（八）JavaScript的常用基础. Web前端 学习知识点总结（九）JavaScript的BOM和DOM基础. Web前端 学习知识点总结（十）jQuery基础 获取文本和选择器. Web前端 学习知识点总结（十一）jQuery进阶 动画和节点操作. Web前端 学习知识点总结（十二）jQuery进阶 表单验证和简单正则表达式. Web前端 学习知识点总结（十三）学生管理系统案例.
本文来总结一下display和float，两者为了页面的合理布局而设计的，当出现浮动或者因为标签的类型，导致页面的设计不均衡，时多使用display：inline 和清除浮动的一些基本方法。
一般是121中（中间布局有两个页面） 和 131（中间布局有三个页面） 以前中间的部分使用table去完成。 目前主流实用div+css去制作 （1）用div去分块，用css去整体布局； （2）不是只用div，也用header和section； （3）p，ul，span，a，其他元素根据情况来使用； （4）table不用做布局使用。
块元素：bolck
行内元素：inline
块和行内元素：inline-block，可以让块元素排列在一排。
none：不显示
可以和hover 组成隐藏效果 a:hover+span(+选择紧邻的后面的那个兄弟)。
存在的问题1：会解析换行符号。 解决方案：在父控件使用font-size:0px，在子控件中去设置对应的font-size值。
随之而来会带来第二个问题，当控件内部字数不同时，会产生无法对齐的问题。 解决方案：使用vertical-align:top,对需要对其的每个部分的内部都需要进行添加。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } section{ /*解决方案一：去掉两者之间的间距*/ font-size: 0; } div{ font-size: 10px; border: 1px solid red; width: 100px; height: 100px; /*缺点会有顶部对齐的问题*/ display: inline-block; /*解决方案二：用这个来解决*/ vertical-align: top; } span{ font-size: 20px; border: 1px solid red; width: 100px; height: 100px; display: inline-block; vertical-align: top; } </style> </head> <body> <section> <div>div asdasd</div> <span>span</span> </section> </body> </html>实现当鼠标悬浮div时候，span的出现。 当两个标签在同一级的时候，多使用“+”进行连接的判断，当处于包含的关系时“>”的操作。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ border:1px solid red; width: 100px; height: 100px; display: inline-block; } div:hover+span{ display: inline-block; } span{ display: none; border:1px solid red; width: 100px; height: 100px; } </style> </head> <body> <div>div</div> <span>span</span> </body> </html>在需要进行浮动的地方加语句，float的语句有none，left，right
问题：父控件保不住浮动，导致边框塌陷(影响父控件后面的元素
在父控件的末尾添加一个块元素（在行内元素上没用，一般是div）。clear的元素，认为浮动的元素是标准文档流的效果。
clear:left/rigt clear：both 缺点：需要添加div在要清除浮动的末尾，会有很多div的元素，产生标签冗余。
<style> .clear{ clear:both; } <style> <body> 要清除的段落 <div class="clear"> <body>给父控件添加height（前提是知道父亲到height的情况）
hidden 父控件重新计算（不适合下拉菜单）（用定位去做）–> 补充： overflow 溢出的时候 visible 显示 hidden 隐藏 scroll 添加滚动条 auto 自动
.clear:after{ content:""; clear:both; 必须是块元素才有用 display:block; }
需要加浮动的地方，从最大类开始的往下加，都加成class="clear"属性，不会有标签的冗余。
完成一下的效果（使用浮动）。 代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } dl{ border: 1px solid gray; /*overflow: hidden;*/ } dl dt{ font-weight: bold; padding: 10px 0px 10px 20px; font-size: 25px; font-family: "微软雅黑"; } dl dd{ /*border: 1px solid gray;*/ width: 250px; float: left; margin: 10px; /*overflow: hidden;*/ } dl dd div{ border: 3px solid gainsboro; margin: 10px; padding: 5px; border-radius:10px; width: 90px; /*在div中设置浮动 边界就是内部元素的大小*/ float: left; /*overflow: hidden;*/ } dl dd div img{ vertical-align: middle; width:100%; border-radius:10px; } dl dd h4{ font-weight: bold; margin: 14px 0px 10px 13px; float: left; } dl dd h4 a{ text-decoration: none; color: cornflowerblue; } dl dd p{ color: gray; font-weight: bold; font-family: "微软雅黑"; margin: 0px 0px 2px 13px; width: 100px; float: left; } .clear:after{ content: ""; clear: both; display: block; } </style> </head> <body> <dl class="clear"> <dt>摄影社区热门小镇</dt> <dd> <div> <img src="img/微信图片_20201004151226.jpg"/> </div> <h4><a href="#">风景狙击手</a> </h4> <p>成员：35</p> <p>作品：276</p> </dd> <dd > <div> <img src="img/微信图片_20201004151226.jpg"/> </div> <h4><a href="#">风景狙击手</a> </h4> <p>成员：35</p> <p>作品：276</p> </dd> <dd > <div> <img src="img/微信图片_20201004151226.jpg"/> </div> <h4><a href="#">风景狙击手</a> </h4> <p>成员：35</p> <p>作品：276</p> </dd> <dd > <div> <img src="img/微信图片_20201004151229.jpg"/> </div> <h4><a href="#">《卡帕》先锋</a> </h4> <p>成员：32</p> <p>作品：12321</p> </dd> <dd> <div> <img src="img/微信图片_20201004151229.jpg"/> </div> <h4><a href="#">《卡帕》先锋</a> </h4> <p>成员：32</p> <p>作品：12321</p> </dd> <dd> <div> <img src="img/微信图片_20201004151229.jpg"/> </div> <h4><a href="#">《卡帕》先锋</a> </h4> <p>成员：32</p> <p>作品：12321</p> </dd> </dl> </body> </html>浏览器运行结果：
display： inline-block可以设置水平居中（在父控件设置text-align:center。) 存在的问题： （1）解析空格； （2）子元素高度不一致时，顶部不对齐； （3）不能右对齐； （4）不是节约型显示。
float： 总体用的多 存在的问题：可左可右但是不能居中。且会影响其他元素，需要清除浮动。
