摘要：由于包含元素一定会包围非浮动的子元素而且清除会让这个子元素位于清除一侧浮动元素的下方因此包含元素一定会包含这个子元素以及前面的浮动元素。
浮动元素脱离了文档流,其父元素也看不到它了,因而也不会包围它。这种情况有
时候并非我们想要的,下面向大家传授三种围住浮动子元素的方法。记住,这三种
方法你都得掌握,这样才能审时度势,选择最合适的一种。
为了演示浮动元素的行为,这种行为对布局会产生什么影响,以及解决这个问题的
三种方法,我们首先要从一张带标题的图片开始。图片和标签包含在一个 section
元素中,而 section 元素后面跟着一个 footer 元素。可以把这个 footer 元素想象成
很多网页底部都会有的与页面同宽的页脚。
css样式:
css section {
border: 1px solid blue;
margin: 0 0 10px 0;
}
p {margin: 0;}
footer{
border: 1px solid green;
}
html文档结构：
html
It"s fun to float..
现在的页面效果如下：
现在我们看到的是常规文档流,即块级元素包围着所有子元素,而且在页面中自上
而下相互堆叠在一起。假设我们想让图片标题位于图片右侧,而不是像现在这样位
于下方。运用刚刚学到的知识,我们知道实现这个目标最简单的方式就是浮动图片。
试试看吧。现在我们需要给图片添加一个浮动效果！
csssection img {
float:left;
}
浮动以后以后的效果如下：
可以看到文字都围绕在了图片周围，但是这并不是我们想要的结果！
方法一:为父元素添加 overflow:hidden我们给section应用overflow:hidden之后，达到了我们想要的布局效果
csssection {
border: 1px solid blue;
margin: 0 0 10px 0;
overflow: hidden;
}
效果图如下：
方法二:同时浮动父元素实际上, overflow:hidden 声明的真正用途是防止包含元素被超大内容撑大。应用
overflow:hidden 之后,包含元素依然保持其设定的宽度,而超大的子内容则会被容
器剪切掉。除此之外, overflow:hidden 还有另一个作用,即它能可靠地迫使父元素
包含其浮动的子元素。
第二种促使父元素包围其浮动子元素的方法,是也让父元素浮动起来。
csssection {
border: 1px solid blue;
margin: 0 0 10px 0;
float: left;
}
section img {
float: left;
}
p {margin: 0;}
footer{
clear: left;
border: 1px solid green;
}
浮动 section 以后,不管其子元素是否浮动,它都会紧紧地包围(也称收缩包裹)住它的子元素。因此,需要用 width:100% 再让 section 与浏览器容器同宽。另外,由于 section 现在也浮动了,所以 footer 会努力往上挤到它旁边去。为了强制 footer依然呆在 section 下方,要给它应用 clear:left 。被清除的元素不会被提升到浮动元素的旁边。
方法三:添加非浮动的清除元素第三种强制父元素包含其浮动子元素的方法,就是给父元素的最后添加一个非浮动的子元素,然后清除该子元素。由于包含元素一定会包围非浮动的子元素,而且清除会让这个子元素位于(清除一侧)浮动元素的下方,因此包含元素一定会包含这个子元素——以及前面的浮动元素。在包含元素最后添加子元素作为清除元素的方式有两种。
css.clear_float {
clear: left;
}
插入一个用于清除浮动的空元素：
htmlIt"s fun to float..
同样，更简洁的方式是声明一个clearfix类， 然后把这个类应用于section标签：
css.clearfix:after {
content : ".";
display : block;
height : 0;
visibility : hidden;
clear : both;
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111025.html
摘要：为了使包住浮动元素，有以下方法。由于包含元素一定会包围非浮动元素，而且清除会让这个子元素位于浮动元素的下方，因此包含元素一定会包含这个子元素以及前面的浮动元素。 Its fun to float. Here is the footer element that runs across the bottom of the page. 这是一张带标题的图片，图片和标...
摘要：原文地址本篇文章是笔者的设计指南学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对设计指南进行一些总结，没有看之前第一部分的话也可以从这里传送过去。 原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是笔者的 《CSS 设计指南》 学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对 ...
摘要：方法一为父元素添加方法二同时浮动元素方法三添加非浮动的清除元素定位布局的核心是属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。绝对定位绝对定位会把元素彻底从文档流中拿出来，然后相对于其他元素默认是定位上下文定位。 1.盒模型 盒模型，就是 浏览器为页面中的每个 HTML 元素生成的矩形盒子。 这些盒子们都要按照 可见版式模型（visual formattin...
摘要：会在元素内容而不是元素后插入一个伪元素使用意味着中新增的子元素会被清除左右浮动元素。这一篇主要介绍了盒子模型，浮动和清除。 这是CSS设计指南的读书笔记，用于加深学习效果。 上一篇介绍了css 的工作原理，这一篇主要介绍盒子模型和浮动。 盒子模型 所谓盒子模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。 可见的页面版式主要由三个属性...
摘要：会在元素内容而不是元素后插入一个伪元素使用意味着中新增的子元素会被清除左右浮动元素。这一篇主要介绍了盒子模型，浮动和清除。 这是CSS设计指南的读书笔记，用于加深学习效果。 上一篇介绍了css 的工作原理，这一篇主要介绍盒子模型和浮动。 盒子模型 所谓盒子模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。 可见的页面版式主要由三个属性...
阅读 955·2021-11-24 10:43
阅读 2822·2021-11-22 09:34
阅读 3370·2021-10-08 10:04
阅读 3760·2021-09-23 11:58
阅读 3016·2019-08-30 15:44
阅读 372·2019-08-30 13:01
阅读 1061·2019-08-28 18:07
阅读 1338·2019-08-26 13:42
