WEB(一)——清除浮动

10.21-10.25之 WEB任务(一)

1、一周复习hcj,HTML一般用的也就那些东西,了解一下行内元素、块级元素、行内块元素。
2、清除浮动(好像是五种还是六种方式)
3、BFC(概念、触发、作用、应用)
4、居中问题(水平垂直居中方法,大概有十来种,你自己总结一下)
5、圣杯布局(flex、float、position要会,尤其前两种,gird和table了解就行)
6、轮播图:js原生做弄清楚原理有箭头,实现了写导航点自动播放然后无缝

注:就是不是让你全背下来,但是常用的要会,不能写什么都要翻文档,菜鸟或者w3c都可以 。

上一篇:行内元素,块级元素、行内块级元素

二、清除浮动

由于浮动元素不再占用原文档的位置,不清除浮动的花就会对后面的元素排版造成影响,即清除浮动主要为了解决父元素因为子级浮动而引起内部高度变为0,引起高度坍塌。

实例分析没有浮动和不清除浮动的效果:
HTML:

我是h1,猜猜有几种清除浮动的方式

代码图像演示并说明优缺点

CSS:(没有浮动时图一,注释取消实现浮动图二)

		


图一与图二上下对比发现,浮动元素h1,p的父级container的粉红色没有啦!是因为他们飘起来爸爸就抱不到他们啦!于是出现解决方案!
师傅官方解释嘿嘿:就是父盒子的高度,如果不设定是为0,如果有内容,是内容撑起高度,浮动时候,子盒子脱离文档流,父盒子没有内容,高度为0,所以看不到背景颜色
WEB(一)——清除浮动_第1张图片
解决:
方法一:额外标签法
在包裹浮动元素的父元素中末尾加上

其中 .clear:both(left|right),解释一个left好了,清除左侧浮动影响也可以是不允许左侧有浮动元素。

我是h1,猜猜有几种清除浮动的方式

代码图像演示并说明优缺点

效果图当然和图一是一样的就不添加图片了?
缺点:
增加无意义的标签,违背了结构和表现分离的web标准,后期维护不便。(为此我还去扩展了一下什么是web标准,就当扩充文写吧。)

方法二:overflow:hidden
为此我还去w3c复习了一下overflow的取值,除了hidden还有auto,scroll,但inherit和visible就不行了。auto和scroll有滚动条。
WEB(一)——清除浮动_第2张图片WEB(一)——清除浮动_第3张图片
缺点:内容增多造成不自动换行,导致内容被溢出、隐藏。

方法三:float:xxx
这个方法很好理解,解释给父级CSS也加上对应的float,比如这里是float:left。
实现效果还是图一?
缺点:之后页面多了不可能让每一层都这么float啊,影响页面布局。

方法四:父级增加一个CSS为clearfix(最常用)
HTML:

		

我是h1,猜猜有几种清除浮动的方式

代码图像演示并说明优缺点

CSS:

		

或者(不用双伪元素):

		

WEB(一)——清除浮动_第4张图片
四种方法实现效果就都如此啦嘿嘿~

师傅指点后再扩充一种超简单的方法
方法五:这个很容易想到,如果能确定所需高度直接给父盒子设定高度

下一篇:BFC的概念触发及应用

你可能感兴趣的:(web)