黑马程序员技术交流社区

标题: 关于清楚浮动版心 [打印本页]

作者: overnice 时间: 2019-10-14 22:31
标题: 关于清楚浮动版心
清除浮动
问题：
在做浮动布局的时候，如果父级盒子嵌套了子级盒子，如果父级盒子没有设置固定的高度，那么里面的子级盒子浮动以后，父级盒子的高度就不会被撑开，显示默认的高度为0就会影响后面的盒子显示布局；
说明：
•用浮动布局的时候我们必须要嵌套一个父级盒子，分为以下两种情况：
•1、有些父级盒子能够设置固定的高度，一定要设置；
•2、有些页面由于页面的需要不能设置高度，所以子元素浮动之后脱离了文档流，父级盒子不会被撑开，会影响我们的布局，所以要清除浮动的影响；比如：产品的详情页、产品的展示列表页等；
•3、如果父级盒子没有设置固定的高度，但是子级盒子没有浮动，子级盒子就会撑开父级盒子；
清除浮动的本质
父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；
解决方案：
方案1、如果盒子允许设置固定的高度我们就直接给父级盒子设置固定的高度就会解决问题；
清除浮动的方法 – 方案2
清除浮动之额外标签法（不建议使用）
在最后一个浮动元素的末尾添加一个空的标签：例如：<div style=“clear:both;”></div>
书写方便，但是会添加许多没有意义的标签，不建议使用；
<div class="title">
        <h3>超值体检</h3>
        <a href="#">查看更多》</a>
        <div style="clear:both;"></div>
    </div>
父级加overflow属性法（推荐使用1）
直接给父级添加overflow:hidden;强制的区分了父子级的关系，让父级盒子自适应子级盒子的高度；
简单了解overflow
overflow:hidden; 溢出隐藏，将超出固定宽高的盒子的内容隐藏掉；
overflow:auto;  溢出滚动，将超出固定宽高的盒子的内容以滚动条的像是显示；关于版心
由于电脑的分辨率的不同，我们的网页显示的大小也会不同，所以我们在书写页面的时候会将网页的内容放在一个版心盒子里面在整个电脑屏幕只给居中显示，一般的网页的版心事1000到1200px之间；
因为我们的分辨率现在普遍低的是1366*768宽度，常见的是1920*1080，所以版心在1200到1000是最合理的；问题：一般所有的元素都在版心里面显示，如果做列表的时候给子元素添加了margin，最后一个元素可能会掉下来，原因是子元素的父级刚好是版心的100%和版心一样大，所以装不下

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2