浮动布局

最新推荐文章于 2025-05-26 20:21:04 发布
原创 最新推荐文章于 2025-05-26 20:21:04 发布 · 544 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

浮动布局

浮动属性

float:

	none 	默认不浮动

	left    	左浮动

	right 	右浮动

*说明：页面出现上下布局时都用2个兄弟块元素来实现 而左右布局时 行元素因无法设置宽高这一点 无法实现我们经常想要的效果 所以有了浮动属性 浮动属性就是让 所有元素能够实现左右结构而存在 但是浮动元素也有很多不敬人意的地方。 

	如果父框未设置高度 则会出现“高度塌陷”的问题

	原因是浮动元素不占“文档流”

知识点1.网页布局概念

网页布局：使用div将网页分割为独立的部分，并使用css对这些div进行位置的摆放称为布局。
table表格布局：
     优点：布局容易、快捷、兼容性好。
     缺点：改动不便，需重新调整，工作量大。
使用div布局的好处：
1. 大大缩减页面代码，提高页面浏览速度，减少带宽成本。
2.  结构清晰，容易被搜索引擎搜索到。
3. 缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个具有成千上百个页面的站点。  
4.  强大的字体控制和排版能力。

知识点2.浮动(float)

	left
	right
	none（默认）---了解
知识点3.自动换行word-wrap
	normal：默认，无自动换行。
	break-word：在长单词或者URL地址内部进行换行。

知识点4.文字块左右分离

span元素，如果不对该元素做任何应用央视，那么span元素中的文本和其他文本不会有任何视觉上的差异，但是span元素可以将行内的文字区分成各种块，这是一种应用于行内的块结构体，可以为各种块设置其属性，例如如果使用浮动属性，行内的两个块就会分别浮动在不同的位置。

知识点5.首字下沉

使用span元素块定义文字首字母，并且该文字块左浮动，可以完成首字下沉样式，文字块不用clear样式

知识点6.水平菜单

知识点7.图文混排和文字环绕

知识点8：两侧固定，中间自适应宽度

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left,.main,.right
        {
            float: left;
            height: 20%;
        }
        .main
        {
            width: 100%;
            background-color: deepskyblue;
        }
        .left
        {
            width: 200px;
            margin-left: -100%;
            background-color: orange;
            position: relative;
            left:-200px
        }
        .right
        {
            width: 200px;
            margin-left: -200px;
            background-color: red;
            position: relative;
            right: -200px;
        }
        .con
        {
            padding:0 200px 0 200px;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="main">2</div>
        <div class="left">1</div>
        <div class="right">3</div>
    </div>
</body>
</html>

		1、外容器，里面顺序是main，left，right
		2、main，left，right都设置为左浮动
		3、设置main的宽度为100%
		4、设置left的左边距为-100%,right的左边距为负的自身宽度
		5、设置外容器的padding值留出两个侧翼的位置
		6、设置两个侧翼容器为相对定位，左侧容器left设置负的容器宽度，右侧容器设置right为负的容器宽度
		缺陷：当面板的main部分比两边的两侧容器宽度小的时候，布局会乱掉

双飞翼布局

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style type="text/css">

        #left {
            background-color: red;
            float:left;
            width:200px;
            margin-left: -100%;
        }
        #right {
            background-color: green;
            width: 200px;
            float: left;
            margin-left: -200px;
        }
        #middle {
            float: left;
            width: 100%;
        }
        #middle_content {
            background-color: blue;
            margin: 0 210px;
        }
    </style>
</head>
<body>
        <div id="middle">
            <div id="middle_content">
                middle_content<br>主内容区域
            </div>
        </div>
        <div id="left">
            left<br>左侧边栏区域
        </div>
        <div id="right">
            right<br>右侧边栏区域
        </div>
</body>
</html>

		1、外容器，里面顺序是main，left，right，main里面有一个main-content的容器
		2、main，left，right都设置为左浮动
		3、设置main的宽度为100%
		4、设置left的左边距为-100%,right的左边距为负的自身宽度
		5、设置main-content的margin左右为-200px

知识点9.清除浮动

1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #divs
        {

            border: 1px solid #FF0000;
        }
        #div1,#div0
        {
            width: 100px;
            height: 100px;
            border: solid 1px #FF00FF;
            float: left;
        }

    </style>
</head>
<body>
<div id="divs">
    <div id="div0"></div>
    <div id="div1"></div>
</div>

</body>
</html>
clear
clear属性定义了元素的哪边不允许出现浮动元素，在CSS1和CSS2中，这是通过自动为清除元素（既设置了clear属性的元素）增加上外边距实现的。会在元素上的外边距上增加清除空间，而外边距本身并不改变，不论哪一种改变，最终结果都一样，如果声明左边或者右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界上。
		both  （重点掌握）
		 left---了解
		 right—了解
		 none—（默认值）
清除浮动的方法

1、父级div定义height

优点：简单，代码少，容易掌握。
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。
建议：不推荐使用，只建议高度固定的布局时使用。

BFC

创建BFC的方法：
			float的值不为none
					虽然可以开启，但是导致父元素原有高度丢失，而且也会导致下面的元素上移
			position的值不为static或者relative
			display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
					虽然可以开启，但是导致父元素原有宽度丢失
			overflow的值不为visible
						副作用最小的方式
开启后的特点：
			父容器垂直外边距不会和子元素重叠
			开启BFC的元素不会被浮动元素所覆盖
			开启BFC的元素可以包含浮动的子元素
利用BFC防止外边距折叠
			<div class="container"> 
			<p>Sibling 1</p> 
			<p>Sibling 2</p> 
			<p>Sibling 3</p>
			 </div>
			
			.container
			 {
			 background-color: red; 
			overflow: hidden; 
			 } 
			p 
			{ background-color: lightgreen;
			 margin: 10px 0;
			 }
			
			上面的样式造成了外边距合并
			
			下面是处理方法
			<div class="container">
			 <p>Sibling 1</p> 
			<p>Sibling 2</p> 
			<div class="newBFC"> 
			       <p>Sibling 3</p> 
			</div>
			 </div>
			
			.container
			 { 
			background-color: red; 
			overflow: hidden; 
			} 
			p { 
			margin: 10px 0; 
			background-color: lightgreen;
			 }
			 .newBFC { 
			overflow: hidden;
			 }

IE6不支持BFC，使用zoom:1,这是开启HasLayout模式，其它浏览器不支持
2、结尾处加空div标签clear:both

优点：简单，代码少，浏览器支持好，不容易出现怪问题。
缺点：如果页面浮动布局多，就要增加很多空div，让人感觉很不爽。
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法。

3、父级div定义overflow:hidden

原理：不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。
				优点：简单，代码少，浏览器支持好。
				缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
				建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

4、父级div定义伪类:after

优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题 
缺点：代码多，
建议：推荐使用，建议定义公共类，以减少CSS代码。
.clearfix:after{
content: “.";
display: block;
height: 0;
visibility: hidden;
clear: both;
 }
.clearfix{zoom:1}

知识10.浮动的坑

高度塌陷
浮动坑2-高度塌陷
<style>
/*当子类进行浮动时如果父类的div没有满足子类浮动的div的高度的话，就会出现子类溢出父类的高度塌陷*/
.box{width:500px;border:1px solid #000;}
.left{width:100px;height:100px;background:#f99;float:left;}
.right{width:100px;height:100px;background:#99f;float:right;}
</style>
</head>
<body>

<div class="box">
	<div class="left"></div>
    <div class="right"></div>
</div>
浮动元素不占文档流
浮动坑1
/*
坑1:浮动元素不占文档流
如果left的div实现了左浮动，但是由于不占用文档流所以right的div就会移动到左上角，并且left的div就会覆盖right的div；
*/
.box{width:500px;height:300px;border:1px solid #000;}
.left{width:100px;height:100px;background:#f99;float:left;}
.right{width:100px;height:100px;background:#99f;}
</style>
</head>
<body>
<div class="box">
	<div class="left"></div>
    <div class="right"></div>
</div>
</body>
浮动的毁天灭地
浮动坑2-毁天灭地
<style>
.box{width:800px;height:200px; border:1px solid #000;}
.left{width:200px;height:200px;background:#f99;float:left;}
.right{width:200px;height:200px;background:#99f;float:right;}

.box2{width:800px;height:200px; border:1px solid #000;}
.left2{width:200px;height:200px;background:#ff0;float:left;}
.right2{width:200px;height:200px;background:#0ff;float:right;}

.box3{width:800px;height:200px; border:1px solid #000;}
.left3{width:200px;height:200px;background:#00f;float:left;}
.right3{width:200px;height:200px;background:#f00;float:right;}

</style>
</head>
<body>

<div class="box">
	<div class="left"></div>
    <div class="left2"></div>
    <div class="right2"></div>
    <div class="right"></div>
</div>

<div class="box2">
	<div class="left2"></div>
    <div class="left3"></div>
    <div class="right3"></div>
    <div class="right2"></div>
</div>

<div class="box3">
	<div class="left3"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="right3"></div>
</div>

</body>
如果左边的浮动的元素，形成了高度塌陷，那么下面的div中的子元素的左浮动就会紧挨着上面溢出的浮动元素的右边；

知识11.浮动口诀

浮动口诀：

1. 一块元素浮动了 其他兄弟元素都要浮动
2. 设置完浮动后，考虑下父元素有没有“足够”的高度
浮动的奥运5环
浮动的奥运五环
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动练习-奥运五环2-正规</title>
<style>
#box{width:600px;height:600px;border:2px solid black;}
#box .box-t{height:200px;}
#box .box-t .box-t-l{width:200px;height:200px;background:red;float:left;}
#box .box-t .box-t-r{width:200px;height:200px;background:yellow;float:right;}

#box .box-c{height:200px;}
#box .box-c .box-c-c{width:200px;height:200px;background:orange;margin:0 auto;}


#box .box-b{height:200px;}
#box .box-b .box-b-l{width:200px;height:200px;background:blue;float:left;}
#box .box-b .box-b-r{width:200px;height:200px;background:green;float:right;}
</style>
</head>
<body>

<div id="box">
	<div class="box-t">
    	<div class="box-t-l"></div>
    	<div class="box-t-r"></div>
    </div>
    <div class="box-c">
    	<div class="box-c-c"></div>
    </div>
    <div class="box-b">
    	<div class="box-b-l"></div>
    	<div class="box-b-r"></div>
    </div>
</div>
</body>
</html>

知识12.浮动的特点

1
<title>浮动特1</title>
<style>
/* 浮动元素左右会贴着 如果父元素宽度不够 那么浮动的元素会往下掉 
都是右浮动的元素 浮动顺序会颠倒

*/
.box{width:500px;height:300px;border:1px solid #000;}
.left{width:100px;height:100px;background:#f99;float:right;}
.right{width:100px;height:100px;background:#99f;float:right;}
</style>
</head>
<body>

<div class="box">
	<div class="left">1</div>
    <div class="right">2</div>
    <div class="left">3</div>
    <div class="right">4</div>
    <div class="left">5</div>
    <div class="right">6</div>
    
</div>
2
浮动特2
<style>
/* 浮动元素会改变原类型的特性 全都转化为一种新的浮动特性 行元素为浮动之后可以设置宽高*/
div{width:200px;height:200px;background:#f99;text-align:center;float:left;}
span{width:200px;height:200px;background:#99f;text-align:center;float:left;}
</style>
</head>
<body>
<span>span</span>
<div>div</div>
3
<title>浮动特3</title>
<style>
/* 浮动元素无法与文本重叠 文本会被浮动往当中挤 */
.box{width:500px;height:300px;border:1px solid #000;}
.left{width:100px;height:100px;background:#f99;float:left;}
.right{width:100px;height:100px;background:#99f;}
</style>
</head>
<body>

<div class="box">
	<div class="left"></div>
    <div class="right">我内心黑暗心胸狭隘</div>
</div>
浮动布局有哪些优点？有什么缺点？清除浮动有哪些方式？
构建数字世界的感官之桥 | 分享前端工程化、动效魔法与性能之舞！
11-10 1530
浮动布局简介：当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。 1. 浮动布局的优点 浮动布局优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质，例如可以设置宽高等。但它与inline-block还是有一些区别的，第一个就是横向排序的时候，float可以设置方向而inline-block方向是固定的；第二就是inl.
CSS之页面布局之一（浮动布局）
JackZhang的专栏
11-10 3836
浮动布局是非常经典常见的页面布局方式。 实现方式很简单，第一步先
CSS——浮动布局
最新发布
？的博客
05-26 546
本文介绍了CSS浮动属性的工作原理及其影响。浮动元素会脱离文档流，形成独立浮层，左浮动会从左到右排列，右浮动则从右到左排列。浮动会导致父元素高度塌陷，虽然可以通过设置固定高度解决，但这会带来内容溢出、响应式适配差等问题。此外，浮动还会造成文字环绕效果，这种特性在现代前端开发中可能成为副作用。文章最后展示了一个包含浮动导航栏的网页结构示例，演示了浮动在实际布局中的应用。
浮动布局详解
weixin_33721427的博客
03-25 111
首先要理解浮动的原理(机制)：浮动的设计初衷是为了设计文字环绕效果 紧接着理清浮动造成的影响：父级元素高度塌陷(包裹效应)，即父级元素没有设宽高，宽高由子级元素撑开，当子级元素浮动后，父级的宽高为0。在HTML里有一个元素浮动势必影响别的元素。 在IE浏览器下造成的问题->引申兼容IE浏览器的hack写法(面试考点) _针对IE6 如写法width:100px;...
CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）
weixin_30419799的博客
05-06 253
css之浮动布局 本人博客：查看文章 1.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置 2.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成：使用css属性float：left/right/none...
浮动布局的理解
weixin_30273175的博客
07-16 254
浮动布局：脱离了传统的文档流，但又未完全脱离，浮动的目的就是为了让块级元素可以并排显示。 格式：float:left/right/none,none 默认不浮动 浮动的特点及影响 在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就会往上排。例如: <div class="item"> <div class="item1"> ...
DIV+CSS 浮动布局完美解决方案
09-25
浮动布局在网页设计中是一种常见的方法，用于创建多列布局，使得内容能够并排显示。然而，浮动布局在实际应用中经常会遇到各种问题，尤其是在不同浏览器之间存在兼容性差异，如Firefox、IE7、IE8及IE6。这些问题通常...
CSS 浮动布局的练习 Demo，名为 古诗欣赏
09-16
在本文中，我们将深入探讨与"CSS浮动布局"相关的知识点，通过一个名为“古诗欣赏”的练习Demo来学习和理解这一重要概念。这个Demo旨在帮助我们掌握如何利用CSS的浮动特性来实现美观的网页布局。 首先，让我们了解...
CSS-float浮动布局、float清除浮动与flex布局
weixin_44201223的博客
04-26 1786
float flex 清除浮动
实战CSS：静态百度首页实现
KaiSarH
12-16 843
目标 : 将百度首界面静态实现,实现以下效果. 效果: 代码: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度一下, 你就知道</title> <link rel="shortcut i...
浮动布局（float）
m0_55825350的博客
03-16 176
float:left|right|none; 模块横向排列，可解决布局元素横排的问题，同时在网页缩放过程中保留原有的布局结构。 影响： 1、元素一旦浮动会脱离文档流（不占位、漂浮）。 2、浮动的元素会覆盖正常没有浮动的元素。 3、可能子元素的浮动会导致父元素高度塌陷。 4、元素浮动后文字会对其产生环绕效果。 清除浮动： 1、增加挡板元素 .clearFix{ clear:left|right|both; zoom:1; } <div class="clearFix"></...
布局——浮动布局
QYXQYX_的博客
08-18 989
1.布局：元素默认的排列方式，往往这种默认的文档流满足不了我们的需求，所以出现了浮动布局 等。 2.浮动布局： float —— 属性名 属性值：left 向左浮动 ；right 向右浮动；none 【默认值】,不浮动；inherit 继承父元素 目的：浮动布局的主要用法是为了让块级元素在一行中显示（列级布局），或者让文字在图片的周围显示。浮动元素用来解决块级元素在X轴上的排列问题ted 使用方法：浮动布局通常出现在div这种父子结构...
CSS float 浮动布局 样式属性定义及使用方法
YDOOK
08-19 627
float 的全部样式属性 left 定义元素向左浮动。靠左布局排列。 right 定义元素元素向右浮动。靠右布局排列。 none 默认值。元素不浮动，并会显示在其在文本中出现的位置，继承默认属性位置排列。 inherit 定义元素从父元素继承 float 属性的值。 ...
浮动布局【CSS】
wuxian_wj的博客
12-22 1447
1. 什么是浮动 浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。 1.1 特征 1.1.1 脱离文档流 脱离文档，也就是说浮动不会影响普通元素的布局。即其他div不会被设置浮动的div浮动位置影响，但是文字仍会为被浮动div让位。因为设置浮动的div只脱离了文档流并未脱离文本流。 从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元
浮动布局图片错位问题的根源分析与解决
标题“解决浮动布局列表下图片不一样导致浮动单元错位问题”主要涉及CSS浮动布局技术以及在实际应用中可能出现的页面布局错位问题。这个问题常常发生在网页设计时，尤其是当列表中的图片尺寸不一致时，不同高度的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值