围住浮动

浮动元素脱离文档流，父元素也看不见它，围住浮动的3种方法：1.为父元素添加overflow：hidden，强制包围浮动。2.父元素也浮动。3.添加非浮动的清除元素，给父元素的最后添加一个非浮动的子元素，然后清除该子元素，例如给父元素添加一个类clearfix。

.clearfix：after{

content:".";

display:block;

height:0;

visibility:hidden;

clear:both;

}

时间： 2024-10-28 20:35:26

围住浮动的相关文章

围住浮动元素的三种方法

html代码 1 <body> 2 <section> 3 <img src="sea.png" alt="sea"> 4 <p>图片标题</p> 5 </section> 6 <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut lab

父元素如何围住浮动子元素

当元素使用float属性,将脱离文档流,因此父元素便不会包围它. <section> <div class="左栏"> 我是左栏 我是左栏 我是左栏 我是左栏 </div> <div class="右栏"> 我是右栏 </div> </section> <footer>我是页脚</footer> CSS样式如下: section{ border: 1px solid #3

CSS围住浮动元素的三种方法

浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2.同时浮动父元素 3.添加清除浮动元素. 1.父元素overflow:hidden overflow:hidden的真正作用是防止元素被超大内容撑大.使用hidden后,元素保持其设定的高宽,超大的内容会被“剪切”掉,变为页面不可见部分.同时,overflow:hidden也能强迫父元素包围浮动子元素

CSS浮动布局与菜单栏设计

公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档流,导致下面的元素向上提.  布局存在问题:由于浮动元素宽度已设定,根据盒模型,对于有宽度的盒子添加padding border和magin导致盒子变大,从而挤出后面浮动元素,导致下移,称作"浮动移滑". 围住浮动元素的三种方法: 1为父元素添加 overflow:hidden   强制包

CSS设计指南之浮动与清除

原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效果.然而,这个属性也成为了创建多栏布局最简单的方式. 1.文本绕排图片 在浮动一张图片或其他元素时,你是在要求浏览器把它往上方推,直到它碰到父元素的内边界.后面的段落不再认为浮动元素在文档流中位于它的前面了,因为它会占据父元素左上角的位置.不过,它

浮动与清除

浮动与清除 浮动, 意思就是把元素从常规的文档流中拿出来.拿出来干什么? 一是可以实现传统出版物上那种文字围绕图片的效果, 二是可以让原来从上往下罗列(堆叠)的块级元素, 变成左右并列, 从而实现分栏布局. 浮动和清除是用来组织页面布局的一柄利剑,这柄利剑的剑刃就是float和clear属性. 浮动元素脱离常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 查看效果 围住浮动元素的方法 浮动元素脱离了主流(文档刘),其父元素(组织上)看不到它了,因此逃出了

浮动：图片文字两栏布局

利用元素浮动实现如下图的两栏布局: HTML部分代码如下: 1 <section> 2 <div class="wrap"> 3 <img src=""> 4 <p class="clearfix">......</p> 5 </div> 6 <div class="wrap"> 7 <img src=""> 8

css设计指南第3版 读书笔记

html标记内容,css显示内容. html标记由一系列标签组成,包括闭合标签和自闭合标签,属性给标签提供了额外信息.标签可以嵌套. 标签分为块级别和行内级别,块级标签占一行(扩展到与父元素同宽),行内标签则相反,只有在空间不足才会折到下一行. html实体表示键盘上没有印刷的字符,它以&开始,;结束. dom层次可以使用父标签(直接祖先),子标签(直接后代),同胞标签,后代.祖先标签来表示. html标签都有一组样式,通过css来设定.css选择符和要应用的样式构成了一条css规则. css行

CSS 设计指南3 读后感

HTML标记与文档结构 块状元素.行内元素.样式元素.结构化标签.盒模型.文档对象模型? 块状元素 div,p,h1-h6,address,ol,ul,pre,table,fieldset,legend,header,footer,nav,section,article,aside ? 行内元素 a ,img,span,input,label,select,abbr,I,big,small,em,bold,strong ? 样式元素 Center,font,basefont,s,strike,u