第7章 CSS浮动与定位-【好程序员成长】HTML5从入门到精通

第7章 CSS浮动与定位 CSS浮动的原理 CSS定位 浮动原理 CSS定位 目 录 CATALOUGUE 01 02 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 掌握浮动的原理 了解BFC概念 掌握清除浮动的处理 掌握CSS定位的四种模式 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 7.1 浮动原理 7.1.1 脱离文档流 7.1.2 float属性 7.1.3 float的注意点 7.1.4 clear属性 7.1.5 清除嵌套中浮动 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 7.1 浮动原理 文档流是元素在页面中出现的先后顺序。元素在没有任何CSS样式修饰的情况下，元素的排列方式就属于正常文档流，即窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。 所谓的脱离文档流就是利用CSS样式使元素在HTML结构中的顺序和展示出来的顺序不一致。 7.1.1 脱离文档流 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 7.1 浮动原理 CSS中利用float属性来设置浮动操作，当被设置成浮动的元素时，会按照一个指定的方向移动，直到到达父容器的边界或者另外一个浮动元素浮动停止，其值有none、left和right三个。下面介绍不同取值和含义。 1.none none值为默认值，表示不进行浮动操作，元素处于正常文档流。 2. left left值表示对元素进行左浮动，元素会沿着父容器靠左排列且脱离文档流。 3. right right值表示对元素进行右浮动，元素会沿着父容器靠右排列且脱离文档流。 7.1.2 float属性 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 7.1 浮动原理 box2沿着它的父容器box1靠右侧进行排列。 当给box2和box3都添加浮动时，它们都会脱离文档流。它们处于同一平台，所以会紧挨在一起，从而实现左右排列的布局方案。可以同时靠左、靠右或是左右分开排列。 7.1.2 float属性 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 7.1 浮动原理 （1）靠左排列 box2和box3的float属性同时设置为靠左排列，两个元素会紧挨在一起，排列在左侧。 （2）靠右排列 box2和box3的float属性同时设置为靠右排列，两个元素会紧挨在一起，排列在右侧。 （3）左右分开排列 box2设置为左浮动，box3设置为右浮动，两个元素会左右分开排列。 7.1.2 float属性 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 7.1 浮动原理 CSS中的float属性比较复杂，有很多需要注意的点，下面依次进行讲解。 1.只会影响后面的元素 float属性只会影响到后面元素的布局，而对之前的元素不会造成任何的影响。如为box3元素添加浮动，不会影响到前面的box2元素。 7.1.3 float的注意点 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 7.1 浮动原理 2.内容默认提升半层 正常文档流位于页面的底层，而脱离文档流位于页面的上层，那么当有内容存在时，内容默认在底层与上层之间的位置。 7.1.3 float的注意点 内容并没有在浮动元素的下面，而是在外面，其实这就是内容默认会提升半层。可以利用这个特点，来实现图文混排的效果。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 7.1 浮动原理 3.默认宽根据内容确定 当未给浮动的元素设置宽度时，浮动元素的宽与内容的宽相同。浮动的元素改变了块标签的特点。 7.1.3 float的注意点 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 7.1 浮动原理 4.换行排列 当多个元素设置浮动时，它们会水平排列，但是如果父容器放不下这些浮动元素时，会自动换行进行排列。 7.1.3 float的注意点 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 7.1 浮动原理 有时不希望浮动的元素影响到后面元素的布局，就可以给后面的元素添加清除浮动的操作。在CSS样式中通过clear属性，来设置清除浮动的操作。其有left、right和both三个属性值。 1.left left值用来清除左浮动。这里要注意clear属性为left值时，只能清除之前元素的左浮动，对右浮动不起作用。 2.right right值是用来清除右浮动的。 7.1.4 clear属性 初心至善 匠心育人 锋云智慧官网 www.fengyun