[郑州|结业弟子]JS-高雪峰|2017年03月08日的日报-技能树.IT修真院

发表于： 2017-03-08 21:13:21

1 708

今天完成的事情：上午对任务10的响应式布局进行了调整，截止到中午时，只完成了顶部和底部导航栏的调整。进度条的调整还没有完全调整完成。主体部分还没有调整。下午开始制作今天晚上分享的小课堂知识点。晚上查看昨天在网上寻找的修改radio中input样式的模板，可能还要用覆盖重新自己做的方法来达到设计的目的，我看网上大多也是这样做的。

明天计划的事情：完成任务10进度条、主体表单、radio样式的调整。

遇到的问题：

第一个是导航栏4个导航按钮的响应式，调整，开始一直试图让其在小分辨率下逐渐缩小，但是在500px以下受最小字体的影响，就不能再缩小了，再往下就自动换行了，调试了一个小时始终没能如愿，最后想起来任务9的办法，在768px以下变换了样式，改成下拉菜单了，但是套下拉菜单的话，以前设定好的样式类有好多重的地方，又一个个查看问题的类，重新调整的，上午基本就搞这个了。

第二个是进度条的响应式调整，开始以为会简单些，把进度条在小分辨率下改变width的占比就能解决问题，但是进度条完成了，可是相对应的文字和圆框却没有做相应的变化，可能因为都是用定位的方法在电脑分辨率时做的，目前还没有解决，明天务必会解决的。

收获：将今晚小课堂的内容整理了一下：

什么是浮动？有哪些消除浮动的方法？

1.背景介绍

在现在的网页编写过程中，经常遇到设计的模板中诸如图片、文字、表格等的位置，通过常规的设置无法到达设计要求的布局时，就会想到引用使元素浮动的方法，将它放到需要的位置。由此，我们引入今天分享的内容：float属性。

2.知识剖析

浮动，就是目前我们常用的float属性，在CSS中的作用是使所涉及的元素脱离文档流并使其可以有移动到其父元素的最左边或者最右边的效果。

2.1 文档流的概念

文档流是文档中可显示对象在排列时所占用的位置。

将窗体自上而下分成一行行显示，并在每行中按从左到右的顺序排放元素的效果，就是文档流直观的表现。

2.2 浮动，脱离文档流

通过使用浮动属性，可以使元素脱离文档流，上浮到文档流之上，随后可以改变其位置的现象。参看下边的图片

2.3 浮动的属性值

浮动的属性值有三个：float：none；float：left；float：right；

浮动不是任意的，其还是在父元素的范围之中，不能脱离于父元素的内容区域。

3.常见问题

问题: 使用浮动虽然方便了特殊显示内容的布局，但有时也会出现一些问题。如何在布局中消除float的副作用，不影响其他元素正常的布局效果？

4.解决方案

问题：使用浮动会影响周边元素及父级元素的位置和width，height属性。

方法：第一种，可以对其父元素设置合适的高度。一般设置高度需要能确定内容高度才能设置，并且要保证相应高度不需要有自适应或者响应式要求等情况下才行。

方法：第二种，在相同的父元素中，浮动的子元素之后添加一个空标签，设置样式为："clear：both;"标签可以是div，也可以是p，或者br等块元素。因为该属性的作用是清除浮动对该元素的影响，也就是同级div浮动之后导致浮动元素脱离文档流而使未浮动元素上移，在页面中的显示效果就为浮动元素将未浮动元素遮住，清除之后该未浮动元素就会放置于浮动元素的下方，也就是可以像文档流时的布局效果，但又因为此未浮动元素没有宽高等属性，所以父元素的高度就会基于此元素的上边框计算，也就相当于文档流中的自适应高度。

方法：第三种，对父元素设置overflow的样式。overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。不能和position配合使用，因为超出的尺寸的会被隐藏。overflow:auto，与hidden原理一样，不过内容过多表现不同。

方法：第四种，对父元素设置伪类:after，设置其中的属性。IE8以上和非IE浏览器才支持:after。zoom(IE转有属性)可解决ie6,ie7浮动问题，触发haslayout。