精华内容
下载资源
问答
  • 1、 Float1、 浮动的定义Float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动浮动元素会生成一个块级框,而不论它本身是何种元素。CSS ...

    1、 Float

    1、 浮动的定义

    ebc05646de8d46cdf1ad1efcfd458903.png

    Float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

    CSS 的 Float(浮动)使元素脱离文档流,按照指定的方向(左或右发生移动),直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    说到脱离文档流要说一下什么是文档流,文档流是是文档中可显示对象在排列时所占用的位置/空间,而脱离文档流就是在页面中不占位置了。

    【实例1-1】

    88b6d62e80c11b2a15d554400d340eda.png
    7bd1a70f3695a48d258d6b2880eaea95.png

    效果如下:

    a3bbde5ac3db8ef062349b45a312bbf3.png

    2、 浮动的原理

    (1) 浮动以后使元素脱离了文档流(在页面中不占据位置)

    (2) 浮动是碰到父元素的边框或者浮动元素的边框就会停止

    (3) 浮动不会重叠

    (4) 浮动只有左右浮动,没有上下浮动

    (5) 浮动以后块级元素在同一行显示,行内元素可以设置宽高

    (6) 元素没有设置宽度和高度时,宽度为内容撑开

    请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:

    671f6ca930d46273db6915bc4cc87e38.png

    再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失

    如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

    03a072d9af6ff94b0054b6d498d7e739.png

    如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素"卡住":

    c0eb4bc04e86d9def755a77e2775ad6e.png

    3、 浮动的语法

    b7518850fe1687d0432721c2a3dd22b1.png

    4、 清除浮动的影响

    当元素设置float浮动后,该元素就会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素,浮动元素会造成父元素高度塌陷。

    【实例1-2】

    686e51ceded6990e7f718b6663ee19cd.png

    子元素.one没加浮动时的样式如下:

    e6d724fa67a7e38d4dcc73751b6b9f65.png

    父元素高度由子元素撑开

    3da5cafad7fb19f774b8816d4c9305fb.png

    给子元素设置浮动后效果如下:

    703b841ec44581d48a2b810436be9dd6.png

    所以当我们设置float后,要根据不同情况来清除浮动。下面介绍几种常用的方法:

    (1) 设置父布局的高度

    设置父标签合适的高度,前提必须确定子布局的高度,来计算父布局的合适高度,包裹住子布局。

    【实例1-3】

    31efd8dfd62844e9d5d472682a901494.png

    (2) 受影响的元素加clear属性

    clear:left | right | both;

    【实例1-4】

    1528fde645c7a660533de442084e5e08.png
    c940b8f43174126a80a6093f07b11c7e.png

    清除浮动之前,由于box的三个子元素都加了浮动,排除到文档流之外,box的高度坍塌,所以下面的div被覆盖住了。

    给受影响的div加clear,清除浮动的影响

    ca72dc6941d722aaa95cc1fc99f8d6f5.png

    清除完效果如下:

    051178d08383d16e9062d82ed4a7f1c1.png

    (3) overflow清除浮动

    这种情况下,父布局不能设置高度。 父级标签的样式里面加: overflow:hidden;

    【实例1-5】

    7e209effed8c3bbb4530f0845cc99c3d.png

    效果如下:

    b1ad1ab3eae4ba1f76a42b936f450bf9.png

    (4) 空div法

    在最后一个浮动的盒子的后面,新添加一个标签。然后设置clear清除浮动。 这种情况下,父布局不能设置高度。

    优点: 通俗好理解。 缺点: 增加了太多的标签。

    【实例1-6】

    88b8fcd02bf51d7b1848c9da69450ded.png

    (5) 伪对象发

    为父标签添加伪类After,设置空的内容,并且使用clear:both; 这种情况下,父布局不能设置高度。

    优点: 无需添加多余的标签,并且可以全局调用。

    【实例1-7】

    0ad1eb9c7b261dd5c3509f977cff4a20.png
    展开全文
  • CSS Float(浮动),会使元素向左或向右移动,其周围元素也会重新排列。 Float(浮动),往往是用于图像,但它在布局时一样非常有用。 1.1 float属性(设置元素浮动) 值 描述 left 元素向左浮动。...

    1.CSS浮动

    CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

    Float(浮动),往往是用于图像,但它在布局时一样非常有用。

    1.1 float属性(设置元素浮动)

    描述
    left 元素向左浮动。
    right 元素向右浮动。
    none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
    inherit 规定应该从父元素继承 float 属性的值。

    1.2 clear属性(清除元素浮动)

    描述
    left 在左侧不允许浮动元素。
    right 在右侧不允许浮动元素。
    both 在左右两侧均不允许浮动元素。
    none 默认值。允许浮动元素出现在两侧。
    inherit 规定应该从父元素继承 clear 属性的值。

    2.元素水平浮动 

    元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。

    一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

    如果图像是右浮动,下面的文本流将环绕在它左边:

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>CSS简单学习</title>
    		<style type="text/css">
    			img {
    				float: right;
    			}
    		</style>
    	</head>
    	
    	<body>
    		<p>在下面的段落中,我们添加了一个 <b>float: right</b> 的图片。导致图片将会浮动在段落的右边。</p>
    		<p>
    			<img src="img/images/tx.jpg" width="100" height="100" />
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    		</p>
    	</body>
    </html>


    3.彼此相邻的浮动元素

    如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。

    在这里,我们对图片使用 float 属性:

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>CSS简单学习</title>
    		<style type="text/css">
    			.ex {
    				float: left;
    				width: 100px;
    				height: 100px;
    				margin: 5px;
    			}
    		</style>
    	</head>
    	
    	<body>
    		<h3>图片库</h3>
    		<p>试着调整浏览器窗口的大小,看看图片的位置会发生怎样的变化?</p>
    		<img class="ex" src="img/images/tv01.jpg" width="100" height="100" />
    		<img class="ex" src="img/images/tv02.jpg" width="100" height="100" />
    		<img class="ex" src="img/images/tv03.jpg" width="100" height="100" />
    		<img class="ex" src="img/images/tv04.jpg" width="100" height="100" />
    		<img class="ex" src="img/images/tv05.jpg" width="100" height="100" />
    		<img class="ex" src="img/images/tx.jpg" width="100" height="100" />
    	</body>
    </html>


    4.清除元素的浮动

    元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。

    clear 属性指定元素两侧不能出现浮动元素。

    使用 clear 属性往文本中添加图片:

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>CSS简单学习</title>
    		<style type="text/css">
    			img {
    				float: left;
    			}
    			p.clear {
    				clear: both;
    			}
    		</style>
    	</head>
    	
    	<body>
    		<img src="img/images/tx.jpg" width="100" height="110" />
    		<p>
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    		</p>
    		<p class="clear">
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    		</p>
    	</body>
    </html>


    5.使用浮动来创建水平菜单的超链接列表

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>CSS简单学习</title>
    		<style type="text/css">
    			ul {
    				float: left;
    				width: 100%;
    				padding: 0;
    				margin: 0;
    				list-style-type: none;
    			}
    			a {
    				float: left;
    				width: 6rem;
    				padding: 3px 10px;
    				background-color: purple;
    				color: white;
    				border-right: 1px solid white;
    				text-decoration: none;
    			}
    			a:hover {
    				background-color: red;
    			}
    			li {
    				display: inline;
    			}
    		</style>
    	</head>
    	
    	<body>
    		<ul>
    			<li><a href="#">Link one</a></li>
    			<li><a href="#">Link two</a></li>
    			<li><a href="#">Link three</a></li>
    			<li><a href="#">Link four</a></li>
    		</ul>
    		<p>
    		上面的示例中,我们设置ul元素和a元素浮动。
    		li元素将显示为内联元素(没有换行符的元素之前或之后),这样可以使得列表同在一行。
    		我们添加一些颜色和边界使其看上去更高档。
    		</p>
    	</body>
    </html>


    6.使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页

    6.1 HTML文件

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>CSS简单学习</title>
    		<link href="css/style.css" rel="stylesheet" type="text/css" />
    	</head>
    	
    	<body>
    		<ul class="topmenu">
    			<li><a href="#home" class="active">主页</a></li>
    			<li><a href="#news">新闻</a></li>
    			<li><a href="#contact">联系我们</a></li>
    			<li><a href="#about">关于我们</a></li>
    		</ul>
    		
    		<div class="clearfix">
    			<div class="column sidemenu">
    				<ul>
    					<li><a href="#flight">The Flight</a></li>
    					<li><a href="#city" class="active">The City</a></li>
    					<li><a href="#island">The Island</a></li>
    					<li><a href="#food">The Food</a></li>
    					<li><a href="#people">The People</a></li>
    					<li><a href="#history">The History</a></li>
    					<li><a href="#oceans">The Oceans</a></li>
    				</ul>
    			</div>
    		
    			<div class="column content">
    				<div class="header">
    					<h1>The City</h1>
    				</div>
    				<h1>Chania</h1>
    				<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    				<p>You will learn more about responsive web pages in a later chapter.</p>
    			</div>
    		</div>
    		
    		<div class="footer">
    			<p>底部文本</p>
    		</div>
    	</body>
    </html>

    6.2 CSS文件(外部样式表)

    * {
    	box-sizing: border-box;
    }
    body {
    	margin: 0;
    }
    .header {
    	background-color: #2196F3;
    	color: white;
    	text-align: center;
    	padding: 15px;
    }
    .footer {
    	background-color: #444;
    	color: white;
    	padding: 15px;
    }
    .topmenu {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
    	background-color: #777;
    }
    .topmenu li {
    	float: left;
    }
    .topmenu li a {
    	display: inline;
    	color: white;
    	text-align: center;
    	padding: 16px;
    	text-decoration: none;
    }
    .topmenu li a:hover {
    	background-color: #222;
    }
    .topmenu li a.active {
    	background-color: #4CAF50;
    	color: white;
    }
    .column {
    	float: left;
    	padding: 15px;
    }
    .clearfix::after {
    	content: "";
    	clear: both;
    	display: table;
    }
    .sidemenu {
    	width: 25%;
    }
    .content {
    	width: 75%;
    }
    .sidemenu ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    .sidemenu li a {
    	margin-bottom: 4px;
    	display: block;
    	padding: 8px;
    	background-color: #eee;
    	text-decoration: none;
    	color: #666;
    }
    .sidemenu li a:hover {
    	background-color: #555;
    	color: white;
    }
    .sidemenu li a.active {
    	background-color: #008CBA;
    	color: white;
    }

     

    展开全文
  • 最近在项目中有好几次遇到这个问题,感觉是浮动引起,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查了相关内容,是因为给li设置了浮动之后它就脱离当前正常文档流,...

    cp from : https://www.cnblogs.com/cielzhao/p/5781462.html

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查了相关内容,是因为给li设置了浮动之后它就脱离当前正常的文档流,所以没办法撑开外层ul的高度。

    以下面代码为例,其实有好几种解决方法,我用的这种并不是最简单的。

    <!DOCTYPE html >
    <html >
    <head>
    <meta charset="utf-8">
    <title>给li设置float浮动属性之后,无法撑开外层ul的问题。</title>
    <style type="text/css">
    ul{
        border: 1px solid #000;
        width: 200px;
        height: auto;
        margin-top: 100px;
    }
    li{
        float: left;
        list-style: none;
        margin-left: 10px;
    }
    </style>
    <body>
    <ul>
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期天</li>
    </ul>
    </body>
    </html>

     

    以上代码显示结果如图,ul的边框变成了一条线,没有被撑开,

    可是我期望的效果是这样的:

    如果ul里边的内容是固定的,给ul加上高度就可以解决问题,但是遇到的项目中li是动态生成的,个数不能确定,所以高度只能设置成auto,这时候其实只要给外层ul也加上浮动属性就可以解决问题,但有时候布局会受到影响,只能根据情况而定;另外给ul加上overflow:auto/hidden也可以解决问题,如果要兼容ie6,后面加上"zoom:1"或者"width:100%"即可。

    最后再总结一下,总共有4种方法:

    第1种方法:在html代码里边给最后一个li后面加空元素清除浮动,div可以换成p或者其他。具体如下图:

    第2种方法:给ul设置固定的高度。具体如下图:

    第3种方法:给ul设置overflow属性,也可以是overflow:hidden。具体如下图:

    第4种方法:给ul加浮动属性,可以换成float:right,但是很有可能布局就会收到影响。具体如下图:

    每个人用的方法应该都不一样,我觉得第三种方法最简单,以后就用这种。哈哈,这会下班回家~~

    转载于:https://www.cnblogs.com/0616--ataozhijia/p/9258089.html

    展开全文
  • [quote]CSS 浮动属性(float)是 Web 设计人员工具箱中一种用来进行页面布局常见工具,但浏览器实现不一致性常常会导致该属性不能被很好理解和使用。 本文将重点介绍此浮动属性及其使用、所涉及到开发工具...
    [quote]CSS 浮动属性(float)是 Web 设计人员工具箱中的一种用来进行页面布局的常见工具,但浏览器实现的不一致性常常会导致该属性不能被很好的理解和使用。 本文将重点介绍此浮动属性及其使用、所涉及到的开发工具以及浏览器的不一致性问题。从人类开始书写文字的早期,我们就看到了文绕图的实践。 Web 的先驱们很早就认识到了文字绕图编排的美学价值及这样做所能节省出来的空间,于是在 Netscape 1.0 和 HTML 2.0 中都包括进了一种 “浮动” (float)功能。浮动功能亦成为了 HTML 标准和级联样式表(Cascading Style Sheet,CSS)规范的基本属性。 虽然 “浮动” 属性的定义十分直观,但该属性的实现和使用却让很多 Web 页面设计者为了能让页面按理想的那样显示而煞费苦心并投入了大量的时间。 在本文中,我将介绍 “浮动” 属性的如下方面: 定义和概念模型 常见用例 开发工具的问题 浏览器问题 何为 “浮动” 属性? 在 CSS2 规范中,可以找到浮动属性的权威性定义和行为原则。在本文后续的章节中,我将对 CSS2 规范中的 9.5 节 “Visual Formatting Model” 中描述的内容展开讨论(相关链接,请参看 参考资料)。 定义 浮动属性指定了某个框应该向左侧还是向右侧浮动。此属性可应用于任何能生成位置不绝对固定的框(box)的元素。 此属性可有如下的值: inherit - 该元素继承封装元素的浮动属性。此值为默认值。 left - 该元素生成一个浮动到左侧的块状框。内容排列到该框的右侧,并从顶部开始。这种排列取决于元素的 “clear” 属性。除非该值为 “none”,否则都会忽略 “display” 属性。 right - 这种排列取决于元素的 “clear” 属性。除非该值为 “none”,否则都会忽略 “display” 属性。 none - 该框不浮动。 行为 浮动属性受限于如下规则。本文中,我只对左浮动行为进行详细描述。要获得右浮动行为的相应信息,只需互换方向即可(即,将左换成右)。 此规范依据框的边框定义行为。CSS 框模型中的四种不同的边框描述如下: content edge 或 inner edge 围绕所呈现的元素内容。这是最接近内容的边缘。 padding edge 包括了应用到某元素的留白。padding edge 定义了此包含块的边缘。 border edge 包括了应用到某元素的边界。 margin edge 或 outer edge 包括了应用到某元素的边框。 包含块的水平限制:左浮动框的 margin edge 不能在包含块的左 padding edge 框的左边。 包含块的垂直限制:左浮动框的上 margin edge 不能高于包含块的上 padding edge。 之前浮动限制:如果当前框是左浮动框而且之前的框也是左浮动框,那么当前框的左 margin edge 必须在之前框的右 margin edge 的右边,或者当前框的上 margin edge 必须要低于之前框的下 margin edge。 无交叠限制:左浮动框的右 margin edge 不能在任何共享相同水平空间的右浮动框的左 margin edge 之右。 之前元素的垂直限制:左浮动框的上 margin edge 不能高于任何块或在由源文档中前一元素生成的被浮动框的上 margin edge。 Line-box 垂直限制:左浮动框的上 margin edge 不能高于任何包含由源文档中前一元素生成的框的 line-box 的上 padding edge。line-box 是一个假想的矩形框,包含在此块级包含元素内连成一线的所有 inline box。其高度(上 padding edge)取最高的那个 line-box 的高度。 对立水平边框限制:如果一个左浮动框的左边还有另一个左浮动框,那么这个左浮动框的右 margin edge 不能在此包含块的右 padding edge 之右。即,左浮动框不能超出此包含块的右边缘,除非它已经被定位在向左足够远的地方。 最佳垂直限制:浮动框必须被置于此包含块内尽量高的地方。 最佳水平限制:浮动框必须被置于此包含块内向左尽量远的地方。 位置优先原则:在判断浮动框位置时,最佳垂直限制优于最佳水平限制。即,要先向上移动浮动框,然后再向一侧移动。 图 1 展示了这些行为原则是如何定位一个边框与文本块相关的图像的。 图 1. 左浮动框的定位示例 其他考虑 让 Web 设计新手感到疑惑的一个问题是应该将被浮动元素置于源文档的什么位置。要解决这个问题,可以采用如下这些经验指导。 定位:浏览器决定了被浮动元素相对于该元素在文档的 “正常排列” 中的位置的垂直位置。正常排列是指如果浏览器忽略定位属性的话文档将如何显示。被浮动元素会从这种编排被拿出并会被在其包含块内向左(或右)移动尽量远的位置。 内联成为块:为了页面格式化,被浮动元素成为了块状框。这等价于指定 display: block 属性。 所需宽度:被浮动元素应该有指定的宽度。CSS2 规范要求元素必须要么具有使用 “宽度” 属性指定的显式宽度,要么具有从所包含的子元素(比如图像)计算得出的隐式宽度。图像的隐式宽度是图像属性的一部分。如果不指定宽度,那么结果将不可预知。 回页首 何为 “clear” 属性? 被浮动元素的后续元素均会围绕该被浮动元素。总的来说,对于文本,这是一种所希望出现的效果。但是,如果是为了布局而使用浮动,那么就需要停止围绕行为。要停止此行为,后续元素需要指定 “clear” 属性。 CSS2 规范提供了有关 clear 属性的权威性定义和行为原则。在本文的后续章节,我将就 CSS2 规范 9.5 节 “ Visual Formatting Model” 展开讨论(参见 参考资料)。 定义 clear 属性表明了一个元素的框的哪一侧或哪些侧不必与之前的浮动框相邻。如果元素本身具有浮动后代,那么 clear 属性对这些后代没有任何影响。 clear 属性只能应用于块级元素。这包括借助浮动属性被转变成块级元素的那些元素。 此属性可以有以下这些值: inherit - 此元素承继封装元素的 clear 属性,为默认值。 left - 增加所生成框的上边框,以便上 border edge 处于由之前的源元素所生成的任一左浮动框的底 margin edge 之下。 right - 增加所生成框的上边框,以便上 border edge 处于由之前的源元素所生成的任一右浮动框的底 margin edge 之下。 both - 将所生成框移动到由之前的源文档所生成的所有浮动框之下。 none - 不对框的位置应用任何与之前的被浮动元素相关的限制。 行为 clear 属性的行为基本上就是对定位被浮动元素的规则的修改。在此规范中,行为亦被视为一种额外的限制。 Clear 限制:浮动框的上 margin edge 必须要处在所有先前的左浮动框(“clear:left” 的情况)、或所有先前的右浮动框(“clear:right” 的情况)、或二者(“clear:both” 的情况)的底 margin edge 之下。 图 2 给出了一个 clear 属性的使用示例。两个段落均具有属性 “clear:left”。这对第一个段落或在第一个段落内定义的浮动框没有任何影响。clear 属性只会让第二个段落定位于浮动之下。请注意第二个段落的上边框是如何垂直扩展以便与前一段落的底边框相接的。 图 2. Clear 定位示例 其他考虑 与 clear 属性相关的一个常见困难是其使用常常需要在文档内的后续元素上添加额外的标记。 清单 1 显示了添加一个空白的 division 导致向 HTML 文档增加了非内容标记。 清单 1. 处理 clear 需要额外标记 


    myFloatClass has float:left specified


    先后有几名作者提出了各种技术来消除对 HTML 文档添加额外标记的需要。这些技术包括: 向容器元素添加 “float”。 向容器元素添加 “overflow:hidden”。 在容器元素上添加一个 CSS2 “:after” 伪类。 浮动容器技术(Float Container Technique):该技巧常常见于页面布局和水平导航菜单 — 在浮动容器内放上一个浮动元素。浮动容器会被扩大以包含所有内部的浮动元素。这种方式需要准确设置容器的宽度属性,100% 是常见的一种设置。 这种技术有几个缺点。第一个缺点是很难设置宽度,使用 100% 可能会与留白冲突。第二,Internet Explorer V6 可能还会添加额外的底边框。最后,浮动框的深度嵌套常常会导致在浏览器中产生某些不可预知的行为。 清单 2 显示了这种浮动容器技术所使用的 CSS 代码。 清单 2. 浮动容器技术 .myFloatClass { float: left; width: 100%; } 隐藏溢出容器技术(Hidden Overflow Container Technique):这种方式很少使用。它涉及了对 “overflow” 属性和默认的 “clip” 属性的利用 — 一个溢出 元素会被扩至所有所含子元素(包含被浮动元素)的大小。 这种技术也有几个缺点。首先,使用溢出可能会影响容器的 fluid height。其次,溢出需要触发 Internet Explorer V6 的 “hasLayout” 属性。 清单 3 显示了隐藏溢出容器技术所使用的 CSS 代码: 清单 3. 隐藏溢出容器技术 .myFloatClass { overflow: hidden; height: 1%; /* Or zoom:1 to trigger IE's hasLayout */ }
    分析这篇文章……

    提交到 Digg

    发布到 del.icio.us

    Slashdot 一下!



    :after 伪类技术:这种方式极少使用。它所涉及的是使用 CSS 伪类在容器后生成内容。使用 :after 伪类技术向结果 HTML 文档追加已指定 clear 属性的新元素。
    这种技术最不推崇,提供支持的浏览器也少。Internet Explorer V7 或更早的版本不支持 :after 伪类技术。但最为重要的是,这种技术会将无意义的内容插入到结果 HTML 文档。
    清单 4 显示了 :after 伪类技术所使用的 CSS 代码。

    清单 4. :after 伪类技术

    .myFloatClass {
    height: 1%;
    /* Or zoom:1 to trigger IE's hasLayout */
    }
    .myFloatClass:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    “浮动” 有哪些应用?
    浮动属性是 Web 设计者工具箱中的常用工具。其应用的数量之多远远超出了设计人员的想象。如下只是浮动属性的几个常见应用。
    参考资料 部分列出了提供有关如何使用浮动来获得预期效果的书籍和网站。
    锚定图像:将图像移动到左边或右边仅仅是部分功能。由于浮动只在元素包括在源文档内的位置处才有效,所以浮动就在该点设锚。这对于文本文档十分重要,因为在这类文档内,常常需要让图像与描述该图像的文本保持位置相对。
    添加标题:通常,如能为图像添加标题就更为理想了,比如为图像加上 “Figure 1 Example image”。通过将图像放置于另一个容器内,比如一个分块 () 并浮动这个分块,就可以为图像添加标题。
    超大的大写字母:可以重新创建一种古典书籍样式,即在一块文本的左上角放置一个字体较大的大写字母。但不能只更改字体大小,因为这样的话,字母上下均会高出其他文本。相反,您所想要的是该字母向下伸展进文本,其余文本围绕此字母。
    Inline list:浮动和显示的组合,内联用来将无序列表 () 转变成水平菜单或导航选项卡。通过用无序列表表示菜单,菜单就会在不能呈现高级或图形化布局的 Web 浏览器(比如只显示文本的浏览器)上显示为一组选项列表。
    多栏页面布局:使用表来在页面上进行多栏布局通常都会导致页面极难维护,因为在源文档中存在太多的对内容无用的标记。随着兼容 Web 标准的浏览器的发展,使用 division 和 CSS 可获得同样的布局效果,而所需的源代码中的标记却少很多。浮动属性让 division 块获得了与表单元格同等重要的地位。
    灵活的图片库页面:传统意义上,表一般会用来布局图片。表的问题在于它们不是流体,而且当用户缩放窗口时,也不能很好地响应。通过使用浮动图像,图片库虽看起来像表布局,但随着用户缩放窗口,布局也会随之变窄或变宽。比如,在一个灵活性很好的图片页面上显示 12 个图片,有可能就会有如下的显示组合:1x12、2x6、3x4、4x3、6x2 和 12x1。


    有无开发工具的考虑?
    每个开发人员都知道,并不是所有的 HTML/CSS WYSIWYG 编辑器都是一样的。每个编辑器都有其自身的特点、对 Web 标准的遵从程度和对页面呈现引擎的选择。
    我对流行的 WYSIWYG 编辑器(比如 IBM® Rational® Software Architect V7、Adobe Dreamweaver CS3 和 Genuitec MyEclipse V6)的使用经验是它们往往对页面的初始准备很有帮助,但若要进行页面调整和优化,您通常都会不得不进行源代码级别的工作。在目标浏览器中进行页面测试至关重要。很多编辑器都包括了对各种浏览器的插件支持,这样一来,就可以从编辑器中启动浏览器来对页面进行测试。
    如果需要对某个 WYSIWYG 编辑器进行评估,我建议用 Acid2 Browser Test 对此编辑器(参见 参考资料)进行测试。Acid2 Browser Test 由 Web Standards Project 开发,用来测试各种浏览器对 Web 标准兼容性。不过,您也可以使用 Acid2 Browser Test 源来测试您备选的 HTML/CSS WYSIWYG 编辑器对 Web 标准兼容性。
    有无浏览器方面的考虑?
    Web 设计人员业已发现了流行的 Web 浏览器中的很多非标准的行为。
    各种浏览器都以不同的方式实现了嵌套浮动元素。其结果是,为了定位的目的,常常需要避免使用被浮动元素的深层嵌套。 在这些情况下,更好的方法是使用相对和绝对定位属性。
    Internet Explorer:Position Is Everything 站点维护 Internet Explorer bug 以及修复手段的目录。请参看 Explorer Exposed 页。
    Firefox:我在 Firefox 中发现的一个与定位相关的 bug 是 Top Gap Bug。这个 bug 通常都会出现于多栏布局,其中栏是浮动的,而 header section 却不是。如果其中某个栏中的某个元素具有上边框,那么此边框会被推至 header 之上,导致窗口顶部和 header 顶部之间出现间隙。修复的手段是在被浮动栏上放一些东西。一种方式是向具有 clear:both 属性的头的底部添加一个元素。另一种方式是让 header 也浮动。
    Opera:Position Is Everything 站点存有 Opera bug 以及修复手段的目录。请参看 Opera Omnibus 页。
    结束语
    自 Web 浏览器技术出现的早期,在页面上浮动元素的功能就已经存在。现代的 Web 设计开始越来越多地使用浮动属性来获得之前使用表实现的页面布局。尽管浮动属性的定义和行为都很简单,但浏览器的不一致性却让使用此属性变得有些困难。本文只对浮动属性作了十分浅显的介绍。更多信息,请参看 参考资料 部分,当然,也要勇于亲自实践。 [/quote]
    展开全文
  • 宏观地讲,我们的web页面制作,是个“流”,必须从上而下,像“织毛衣”。 标准流里面限制非常多,导致很多页面效果无法实现。...此时,如果给这两个div增加一个浮动属性,比如float: left;,效果如下: 这就...
  • 文章目录CSS中float1、float浮动属性2、float文字环绕图片3、float浮动真正原因以及副作用分析4、清除浮动四种解决方法5、实际应用 导航效果 复习一波 简单记录 - 慕课网 - 从网页搭建入门JavaWeb 1、float...
  • 好程序员web前端分享CSS属性组成及作用学习目标1、css属性和属性值定义2、css文本属性3、css列表属性4、css背景属性5、css边框属性6、css浮动属性一、css属性和属性值定义属性:属性是指定选择符所具有属性,...
  • WEB】float 浮动

    2019-11-12 00:01:44
    1.直接在最后一个标签加入样式clear:both 清除两边的浮动流,建议不用破坏原有页面结构。 2.使用伪元素解决,伪元素为行级元素。 span::before span::after 伪元素清除浮动必须是块级元素。display:block; celar...
  • 外边距(间距)塌陷问题 1.并列关系外间距塌陷 现象 元素并列关系,垂直方向相邻margin值相遇,会出现叠加...元素嵌套关系,子元素margin-top属性值会叠加给父元素;如果父元素有margin-top属性值,会与子元
  • web - float , 浮动

    2016-04-10 04:32:00
    元素被设置浮动属性后,呈现特征有: 1.多个块可以在一行显示 2.内联元素支持狂傲 3.默认宽度由内容撑开 4.脱离文档流 5.提升该元素层级,但仅有半级,不会越过父级边界 clear : left,right,both,none...
  • 浮动属性:float(none不浮动,left向左浮动,right向右浮动) .div{ float<!-- (none不浮动,left向左浮动,right向右浮动) --> } 块级标签和行级标签都可以浮动。 当一个行级标签浮动以后自动变成一个块级...
  • web初步】浮动(float)

    2020-04-10 13:58:04
    让多个盒子(div)水平排列成一行,使得浮动成为布局重要手段。 可以实现盒子左右对齐等等… 浮动最早是用来控制图片,实现文字环绕图片效果。 在 CSS 中,通过 float 中文, 浮 漏 特 属性定义浮动,语法如下...
  • 1.元素的浮动属性float 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中相应位置的过程。格式为: 选择器{float:属性值;} 常用属性值为: 属性值 描述 left...
  • web-前端历程(2)浮动与清除浮动 简单来看,这里(layout)-div是无法显示出背景黄色属性的 原因:子元素left和right是直接浮动的,这时脱离了普通文档流,进而无法直接撑起父级元素高度:即认为父级...
  • 一、浮动(float)1、float属性● float默认值为none● 左浮动(元素靠上靠左)float:left● 右浮动(元素靠上靠右)float:right2、float基本特点● 当给元素设置float属性后,这个元素display属性为block● float元素...
  • DIV CSS布局:CSS浮动float属性详解

    千次阅读 2010-04-01 16:25:00
    在传统表格布局中,我们对表格应该对齐方式对实现了对布局应用,而应用Web标准构建网页以后,float浮动属性是布局中非常重要属性,我们常常通过对div元素应用float浮动来进行布局,不但对整个版式进行规划,也...
  • 块元素在文档流中默认垂直排列,所以div自上向下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流,使用float来使元素浮动,从而脱离...当为一个元素设置浮动以后(float属性是一个非none值),...
  • 清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素后面加一个空 div,给它一个样式属性 clear: both(不推荐)(见例2.2) 使用成熟浮动样式类 ...
  • Web前端篇:css浮动

    2019-06-13 21:59:44
    浮动是网页布局中非常重要一个属性。那么浮动这个属性一开始设计初衷是为了网页文字环绕效果。 文字环绕现象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • 熟悉掌握盒子模型,理解div的浮动属性。 实验内容 打开visual studio core,创建一个文件夹。在文件夹中增添html文件,记得加上后缀名.html 打出‘!’+tab键,使用emmet插件进行自动补齐 写‘title’标签,命名...
  • Posted on2013-09-18 09:00Stephen_Liu阅读(2205) 评论(6)编辑收藏 ...使用“浮动”方式后,块级元素表现就会有所不同。 CSS中有一个float属性,默认为none,也就是标准流通常情况。如果将...
  • 6、css浮动属性 一、css属性和属性值定义 属性:属性是指定选择符所具有属性,它是css核心,css2共有150多个属性 属性值:属性值包括法定属性值及常见数值加单位,如25px,或颜色值等。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 455
精华内容 182
热门标签
关键字:

web的浮动属性