精华内容
下载资源
问答
  • WEB中,浮动框架对齐方式属性不是align,那应该是什么属性
  • css浮动属性 1.css浮动属性 Float 浮动 Float:left 左浮动 Float:right右浮动 2.css对齐操作 (1)使用margin属性进行水平对齐 Margin-left:auto; Margin-right:auto; (2)使用position属性进行...

    css浮动属性

    1.css浮动属性

    Float 浮动

    Float:left 左浮动

    Float:right右浮动

     

    2.css对齐操作

    (1)使用margin属性进行水平对齐

    Margin-left:auto;

    Margin-right:auto;

     

    (2)使用position属性进行左右对齐

    Position:absolute;

    Left:0;

    Right:0;

     

    (3)使用float属性进行左右对齐

    Float:left;

    Float:right

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css 浮动属性</title>
        <style type="text/css">
            #a{
                width: 200px;
                height: 200px;
                background: red;
                float: left; /* 浮动属性,让div在同一排展示 */
            }
            #b{
                width: 300px;
                height: 300px;
                background: blue;
                float: left;
            }
        </style>
    </head>
    <body>
        <!--div 空标签没有实际意义,但是div标签是一个块元素,具有换行的效果-->
        <div id="a">
            div格子
        </div>
        <div id="b">
            div格子
        </div>
    </body>
    </html>
    
    展开全文
  • 1.1 float属性(设置元素浮动) 值 描述 left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动,并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性...

    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;
    }

     

    展开全文
  • 整个页面布局过程中,浮动属性的使用频率是最高的。今天,就来带领大家一同认识这两个神奇的CSS属性。技术等级:初级 | 适合前端开发的初学者阅读学习。一、浮动属性:CSS技术使用float属性来实现块级元素的浮...

    在页面布局中,有两个非常常用的CSS属性。它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行。说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性。整个页面布局过程中,浮动属性的使用频率是最高的。今天,就来带领大家一同认识这两个神奇的CSS属性。

    技术等级:初级 | 适合前端开发的初学者阅读学习。

    1bfb3cbdfe8907d1ca316591f1c6075b.png

    一、浮动属性:

    CSS技术使用float属性来实现块级元素的浮动效果。

    web前端/html5学习群:733581373

    194aa6f26be44adc229aab1e51aafa06.png

    CSS技术使用float属性实现浮动效果

    该属性可以有下列取值:

    left,控制块级元素左浮动。

    right,控制块级元素右浮动。

    属性说明:我们都知道,块级元素之间默认情况下是独占一行的。也就是说,两个在代码中紧密相连的块级元素,它们的摆放位置是一个在上一行,另一个在下一行。尽管通过width和height属性为块级元素设置了大小,使得块级元素无法占满整个行,但是块级元素右侧空余的位置仍然不允许出现任何内容。

    让我们一同来看下列实例:

    HTML代码如下所示:

    CSS代码如下所示:

    #box01,#box02{

    width:200px; height:100px;

    }

    #box01{background-color:#ff5857;}

    #box02{background-color:#5857ff;}

    上述代码的运行结果如下图所示,这张图为我们展示了两个块级元素默认的位置摆放。

    a787053fa8248a78086b5f6dc9a0119b.png

    展示两个块级元素的默认位置

    如果我想让两个块级元素在一行内显示该如何实现呢?这就需要float属性登场了。

    将#box01的CSS代码中添加如下属性:float:left,会发生什么情况呢?同学们实践操作一下,我们会发现,屏幕中就只剩下红色的块级元素了。那蓝色的#box02去哪里了呢?其实#box02响应了#box01浮动的号召,和#box01一同出现在同一行了,只是被压在了红色的#box01的下面。

    解决方法就是让蓝色的#box02也添加上 float:left的属性。这样,两个块级元素就可以共同出现在一行了。下图为我们展示了这样的效果。

    1fda6016cb4fee7cb7d678a16e5e5016.png

    web前端/html5学习群:733581373

    展示两个块级元素的左浮动位置

    下面让我们再看一个实例,这个实例中我们为两个块级元素添加一个容器。

    HTML代码如下所示:

    我们设置容器#box的宽度为400px。内部的两个块级元素:.boxLeft的宽度设置为150px;.boxRight的宽度设置为100px。要求让这两个内部的块级元素在一行内显示,并且分布到容器的两端。

    CSS代码如下所示:

    #box{

    width:400px; height:100px;

    background-color:#cccccc;

    }

    #box .boxLeft{

    width:150px; height:100px;

    background-color:#ff5857;

    float:left;

    }

    #box .boxRight{

    width:100px; height:100px;

    background-color:# 5857 ff;

    float:right;

    }

    我们可以看到,在.boxRight对象上,我们添加了float:right的CSS属性,让这个块级元素发生了右浮动,则该元素跑到了容器的最右侧。下图为我们展示了这样的效果。

    704e83f34a5d05a4d73df3825f63d087.png

    展示两个块级元素的左右浮动位置

    浮动属性的使用结论:

    若希望多个块级元素在一行内显示,则这几个块级元素都要具备float浮动属性。

    二、清除浮动属性:

    CSS技术使用clear属性来实现块级元素的清除浮动效果。

    2d2b2070df564398d555c6764bad4bcc.png

    web前端/html5学习群:733581373

    CSS技术使用clear属性设置清除浮动效果

    该属性可以有下列取值:

    left,清除块级元素的左浮动效果。

    right,清除块级元素的右浮动效果。

    both,清除块级元素的两端浮动效果。

    属性说明:根据上面的float属性的使用,我们可想而知,一个紧跟在具有浮动属性的块级元素后面的块级元素,即使它不想和它前面的块级元素在一行内显示,也会受到前面块级元素浮动属性的影响,被压在前面块级元素的下方。

    解决这个问题,可以对不希望和前面块级元素在同一行显示的块级元素使用清除浮动属性。

    下面让我们来看这个实例:

    HTML代码如下所示:

    CSS代码如下所示(#box .boxRIght):

    #box .boxRight{

    width:100px; height:100px;

    background-color:# 5857ff;

    clear:left;

    }

    因为.boxRight具备clear:left属性,所以即使.boxLeft使用了float:left属性,它们也仍旧分布在两行,不会在同一行显示。就好像没有过使用任何浮动效果似的。

    web前端/html5学习群:733581373

    欢迎关注此公众号→【web前端技术圈】跟大佬一起学前端!欢迎大家留言讨论一起转发

    展开全文
  • CSS 浮动 float属性

    2018-02-21 22:08:56
    浮动CSS中,通过 float属性,任何元素都可以浮动,取值 left 让一个元素向左浮动,取值 right 则向右浮动浮动会影响包含块中的布局,如果一个包含块中存在浮动框,则先让所有的框按照普通流中的位置摆放,再将浮动...

    CSS中,通过 float属性,任何元素都可以浮动,取值 left 让一个元素向左浮动,取值 right 则向右浮动。

    浮动会影响包含块中的布局,如果一个包含块中存在浮动框,则先让所有的框按照普通流中的位置摆放,再将浮动框从文档流中取出来,并让浮动框从包含块的顶部开始,根据浮动方向一个接一个地水平排列。

    浮动元素的包含块,是它最近的块级祖先元素(或表格单元格、或行内块祖先元素)的内容边界。向左浮动的元素,尽可能向左移动,直到碰到包含块的左边界。向右浮动的元素,尽可能向右移动,直到碰到包含块的右边界。

    假设在一个容器中,有两个子元素,一个向左浮动,一个向右浮动:

    
    
    1. <div class = "wrapper">
    2.    <div class = "floatL">box1 </div>
    3.    <div class = "floatR">box2 </div>
    4. </div>

    现在,为容器设置 10px 的内边距,为了便于观察,为容器和子元素设置了边框,并为向左和向右浮动元素添加指示箭头:

    
    
    1. .wrapper {
    2.     width: 320px;
    3.     padding: 10px;
    4.     overflow: hidden;
    5.     border: 2px dashed #ccc;
    6. }
    7. .wrapper div {
    8.     width: 80px;
    9.     height: 60px;
    10.     border: 1px dashed #444;
    11. }
    12. .floatL {
    13.     float: left;
    14.     background: url(img/fl.png) 50% 36% no-repeat;
    15. }
    16. .floatR {
    17.     float: right;
    18.     background: url(img/fr.png) 50% 36% no-repeat;
    19. }

    上述代码的运行结果如图 5‑21 所示:

    框可以向左或向右浮动图5-21 框可以向左或向右浮动

    从上图可以看出,无论向左浮动,还是向右浮动,浮动元素左右边界,都不会超过包含块内容区的左右边界。并且,浮动元素的上边界,也不会超过包含块内容区的上边界。

    一个浮动元素,无论它是块级元素,还是行内级元素,都会生成一个块级框,并可以为它指定宽度和高度。如果没有显式设置宽度和高度,它的宽度和高度由其内容决定,但不超过包含块的宽度和高度。

    假设在一个段落中,有两个 span 子元素,一个向左浮动,一个向右浮动。向左浮动的元素设置了宽度和高度,而向右浮动的元素没有设置宽度和高度:

    
    
    1. <p>
    2. <span class = "floatL">float left</span>
    3. <span class = "floatR">float right</span>
    4. </p>
    
    
    1. p {
    2.     border: 1px solid #ccc;
    3. }
    4. span {
    5.     border: 1px dashed #ccc;
    6. }
    7. .floatL {
    8.     float: left;
    9.     width: 200px;
    10.     height: 40px;
    11. }
    12. .floatR {
    13.     float: right;
    14. }

    上述代码的运行结果如图 5‑22 所示:

    浮动元素的宽度和高度图5-22 浮动元素的宽度和高度

    从上图可以看出,未设置宽度和高度的元素,其尺寸由其内容决定,而设置宽度和高度元素则使用设置的尺寸。由于包含块的高度为 auto,其高度被向左浮动的元素撑开。

    虽然浮动元素生成的也是块级框,但跟块级元素生成的块级框不同的是,浮动框的旁边允许放置其他的框。也就是说,浮动框可以跟块级框、或行内级框、或浮动框在同一行内水平显示。

    由于浮动框已经脱离文档流,当浮动框和块级框并列时,同一行中的块级框会无视浮动框的存在,并占满一整行。这种情况下,块级框会处在浮动框的下层,也无法通过 z-index 属性改变它们的堆叠顺序。但是,块级框中的文本会环绕着浮动框,不会被浮动框覆盖,其效果跟印刷排版中的文本环绕相似。

    假设有一个容器中,有一幅图像和一个段落,图像向左浮动。为了便于观察,为段落添加背景:

    
    
    1. <div>
    2. <img src = "img/img.gif" style = "float:left;" />
    3. <p>无论是块级元素,…,浮动元素的旁边允许放置其他元素。</p>
    4. </div>
    
    
    1. div {
    2.    width: 300px;
    3.    border: 1px dashed #ccc;
    4. }
    5. p {
    6.    font-size: 13px;
    7.    line-height: 2;
    8.    background:  #ddd;
    9. }
    10. img {
    11.    float: left; 
    12. }

    上述代码的运行结果如图 5‑23 所示:

    浮动框与块级框并列图5-23 浮动框与块级框并列

    从上图可以看出,图像会生成一个浮动框,并且,浮动框和段落都紧贴包含块的左内边界,导致段落被浮动框覆盖,而段落中的文本所形成的行框却向右移动,并水平变窄来给浮动框腾出空间。随着文本的增加,后面的文本又会紧贴包含块的左内边界,因为它不再受浮动框的影响,无需再向右移动了。

    如果浮动框和行内级框并列,浮动框将被置于包含块和行框的外边界之间,使行框的水平可用空间减少,导致行框的宽度变窄。

    假设在一个段落中,有四个 span 子元素,一个向左浮动,一个向右浮动,其余两种不进行浮动:

    
    
    1. <p>
    2. <span>inline element 1</span>
    3. <span class = "floatL">float left</span>
    4. <span class = "floatR">float right</span>
    5. <span>inline element 2</span>
    6. </p>

    为了便于观察,为 span 元素添加了 1px 的虚线边框:

    
    
    1. p {
    2.     border: 1px solid #ccc;
    3. }
    4. span {
    5.    border: 1px dashed #ccc;
    6. }
    7. .floatL {
    8.    float: left;
    9. }
    10. .floatR {
    11.    float: right;
    12. }

    上述代码的运行结果如图 5‑24 所示:

    浮动框与行内级框并列图5-24 浮动框与行内级框并列

    从上图可以看出,由于浮动框的存在,行框的宽度变窄,当行框的水平空间不足时,行内级框会自动换行。由于受浮动框高度的影响,行内级框被浮动框卡住。

    如果多个浮动框并列时,它们会按在HTML中的定义顺序,一个接一个,依次水平排列,每个框按照各自的方向浮动。

    假设所有的三个框都向左浮动,则框 1 向左浮动,直到碰到包含块内容区域的边界,另外两个框向左浮动,直到碰到前一个浮动框。如图 5‑25 所示:

    所有三个框都向左浮动图5-25 所有三个框都向左浮动

    假设所有的三个框都向右浮动,情况与全部向左浮动类似。在HTML代码中,框 1 最先被定义,所以排在最右边,框 3 最后被定义,所以排在最左边。如图 5‑26 所示:

    所有三个框都向右浮动图5-26 所有三个框都向右浮动

    如果在一行内无法容纳所有的浮动框,则后面的框会向下移动,直到有足够的空间。如果浮动框的高度不同,在向下移动时,可能被其它浮动框“卡住”。如图 5‑27 所示:

    浮动框下移到有足够空间的地方图5-27 浮动框下移到有足够空间的地方

    如果多个框的浮动方向不尽相同,情况会怎样呢?假设有六个浮动框,按从小到大的顺序依次定义,框 1、2、5向左浮动,框 3、4、6向右浮动。运行结果如图 5‑28 所示:

    不同方向浮动的框图5-28 不同方向浮动的框

    从上图可以看出,当框的浮动方向不尽相同时,会按照在HTML中定义的顺序,摆放每一个框,如果一行内空间不足,后面的框会自动下移,形成多行,在每一行中,每个框按照各自的方向浮动。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • web前端浮动

    2019-03-19 09:55:23
    浮动流 利用浮动摆放盒子即为浮动流 定位流 利用定位摆放盒子即为定位流 2.浮动的意义 1.浮动最开始是做图文绕排的 2.浮动的应用场景:元素排除一排或者一个靠左一个靠右 3.浮动的特效解析 1.浮动的元素还会...
  • 宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”。 标准流里面的限制非常多,导致很多页面效果无法实现。...此时,如果给这两个div增加一个浮动属性,比如float: left;,效果如下: 这就...
  • 网页设计里的浮动 属性

    千次阅读 2016-07-11 16:19:21
    说一说网页设计中的浮动模型 ... 若在文档中加入float层,那么这一层会脱离文档流,进行左右浮动。可以这样不专业的认为,在看HTML文档时,先不看float层(当然...现在来介绍一下float属性: 1.left:向左浮动 2...
  • 1. 盒子模型 找个网站,按f12后,对照右下脚显示的图片讲解 实线外部为margin空间,不属于元素占用的...2. CSS浮动属性floatfloat属性的作用就是改变块元素对象的默认显示方式。 块元素设置了float属性之后,它将不
  • CSS 清理浮动 clear属性

    千次阅读 2018-02-21 22:09:50
    清理虽然浮动可以便于页面布局,但同时会产生一些问题,也就是常说的副作用。浮动元素最常见的缺陷是:父元素的高度塌陷和影响兄弟元素的位置。首先,看看父元素的高度塌陷。假设有一个容器,其中两个子元素,一个子...
  • web前端:浮动

    2017-07-11 17:07:37
    1.浮动的特性 浮动的元素脱离标准文档流 浮动的元素相互贴靠 浮动的元素具有“字围现象” 浮动的元素会对后面的元素造成影响 2.清除浮动影响的方法 给父盒子加上高度(项目中不常用) 因为我们的元素基本上是由内容...
  • web浮动塌陷的原因和简单解决方案

    千次阅读 2018-07-21 13:58:56
    web浮动塌陷的原因和简单解决方案 Introduce 因为学校的学弟学妹们偶尔会问问float的问题,每次都说百度去,好像也不太好。 就。。整理下把。也给未来什么时候犯傻的自己做一份准备 about 作图是不可能...
  • [quote]CSS 浮动属性(float)是 Web 设计人员工具箱中的一种用来进行页面布局的常见工具,但浏览器实现的不一致性常常会导致该属性不能被很好的理解和使用。 本文将重点介绍此浮动属性及其使用、所涉及到的开发工具...
  • CSS 真的可以浮动么? 关于 CSS 浮动属性的行为、使用和支持的概览
  • Web前端篇:css浮动

    2019-06-13 21:59:44
    浮动是网页布局中非常重要的一个属性。那么浮动这个属性一开始设计的初衷是为了网页的文字环绕效果。 文字环绕现象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • 在页面布局中,有两个非常常用的CSS属性。它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行。说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动属性。整个页面...
  • 文章目录CSS中的float1、float浮动属性2、float文字环绕图片3、float浮动的真正原因以及副作用分析4、清除浮动的四种解决方法5、实际应用 导航效果 复习一波 简单记录 - 慕课网 - 从网页搭建入门JavaWeb 1、float...
  • WEB】float 浮动

    2019-11-12 00:01:44
    浮动元素会产生浮动流,块级元素看不到浮动元素,产生浮动元素的块级元素/文本类属性能看到。 1.直接在最后一个标签加入样式clear:both 清除两边的浮动流,建议不用破坏原有页面结构。 2.使用伪元素解决,伪元素...
  • 浮动属性:float(none不浮动,left向左浮动,right向右浮动) .div{ float<!-- (none不浮动,left向左浮动,right向右浮动) --> } 块级标签和行级标签都可以浮动。 当一个行级标签浮动以后自动变成一个块级...
  • Web全栈~08.浮动和定位

    千次阅读 多人点赞 2021-01-12 16:25:30
    Web基本笔记~08.浮动和定位
  • 浮动的特性: (1)浮动元素有左浮动(float:left)和右浮动(float:right)两种 (2)浮动的元素会向左或向右...(5)浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,...
  • 1.元素的浮动属性float 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中相应位置的过程。格式为: 选择器{float:属性值;} 常用属性值为: 属性值 描述 left...
  • 如果想要对网页进行布局,那么比不可少的必须用到浮动浮动的特性:脱离了标准的文档流。 对于块级元素如span想要进行宽度和高度的改变,就可以对span进行浮动浮动之后不存在块级元素和行级元素,所有的元素...
  • web-前端历程(2)浮动与清除浮动 简单的来看,这里的(layout)-div是无法显示出背景黄色属性的 原因:子元素left和right是直接浮动的,这时脱离了普通的文档流,进而无法直接的撑起父级元素的高度:即认为父级...
  • web初步】浮动(float)

    2020-04-10 13:58:04
    让多个盒子(div)水平...在 CSS 中,通过 float 中文, 浮 漏 特 属性定义浮动,语法如下: 选择器 { float: 属性值; } 属性值 描述 none 元素不浮动(默认值) left 元素向左浮动 right 元素向右浮动...
  • DIV CSS布局:CSS浮动float属性详解

    千次阅读 2010-04-01 16:25:00
    在传统的表格布局中,我们对表格应该对齐方式对实现了对布局的应用,而应用Web标准构建网页以后,float浮动属性是布局中非常重要的属性,我们常常通过对div元素应用float浮动来进行布局,不但对整个版式进行规划,也...
  • web前端清除浮动详解

    千次阅读 2017-07-18 10:39:02
    使用该属性就可以清楚浮动带来的影响 Clear:both 这个属性写在被影响的 父盒子 里,  注 :但是有个bug, margin-top失效   清除方式三: 隔墙法( 很重要! ) 1.外墙法 通过增加一个div 并且给这...
  • Web端display属性

    千次阅读 2018-01-05 20:09:03
    定义display属性用于规定元素生成的框类型,影响显示方式值: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | ...
  • 清除浮动.clearfix:after一词,从事web前端的朋友们对此不会陌生吧,下面为大家介绍的是.clearfix:after中用到的所有属性及值的含义,对此感兴趣的朋友可以参考下哈想,希望对大家有所帮助

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,861
精华内容 11,944
关键字:

web的浮动属性