HTML基础知识(四)——浮动

13 篇文章 0 订阅
8 篇文章 0 订阅

一、浮动布局

(一)功能

        1、布局方向:(1)垂直方向(2)水平方向

        水平方向受限,需要设置宽度;

        在水平方向布局的时候出现两个问题:间隙问题(font-size:0)和行对齐问题(vertical-align)。

        2、浮动布局可以让水平排列变简单,浮动的初衷是用来解决文字环绕;

        *原来代码:需要设置display:inline-align转换类型和给父元素设置font-sise:0px,然后给子元素恢复字体大小和对齐(vertical-align)

        *现在代码:给子级设置float就行,默认顶部对齐,没有间隙,可以自由设置margin

(二)浮动布局的原理(浮动特点和用法、存在的问题)

        1、属性值有left、right

        2、浮动规则:设置后元素先浮起来从当前行脱离默认的文本流,进入到新的一层(浮动层),然后会按照设定的方向结合移动,直到遇到父级块的边缘或者其他浮动块边缘停止;

        与margin不同,浮动只能设置移动方向,不能设置距离

        3、元素发生浮动仅限当前行

(三)浮动顺序:标签先写先浮动

(四)浮动换行问题:

        1、剩余存放空间: 浮动块浮动方向一致时(比如都向左浮动),浮动块的剩余空间,是在上一个相邻浮动块与父级边缘之间存放,如果上一个相邻浮动块与父级边缘之间宽度能够容纳该浮动元素,则在上一个相邻浮动块之后,如果不能,则依次向上寻找上一个浮动元素,直到寻找到的浮动元素与父级边缘之间有足够空间能够容纳该元素,放在寻找到的浮动元素之后;如果当前的所有元素都不能满足条件,换一整行。

(五)浮动坍塌

        1、当我们将父级的高度取消之后,希望由容撑开,但是结果发现父级的高度,由没有做浮动的子元素撑开的;如果所有的子元素都做了浮动,那么父元素的高度将完全丢失。

        *两个原因导致:

                (1)父级没有设置高度;

                (2)子级的发生浮动,脱离了原来的文本流,进入浮动层,与父级不在一层,因此无法撑开父级高度

        2、浮动坍塌原理:父级在不设置高度,且所有自己都从父级中浮动起来之后,导致父级高度丢失的现象。

(六)浮动坍塌危害:导致后面布局紊乱

        1、清浮动:消除这种浮动坍塌影响的方法

(七)清浮动方法

        1、给父级设置固定高度(缺点:不灵活,不建议使用)

                如果子元素是由内容撑开的,并做了浮动,我们没有办法给父级一个固定的高度。

        2、让父级也发生浮动(不可取) 。

                让父级也进入浮动层,子级跟父级在同一层级。但这种方法有一个明显的缺点,就是父级如果发生浮动,又会影响父级上一级元素和布局

        3、给父级设置overflow:hidden(缺点:不能完全显示内容)

        4、给父级设置display:inline-block

        5、在父级中最后一个位置添加一个block类型的空元素,然后给这个空元素设置clear(值left/right/both)属性(缺点:增加了代码复杂性)

        6、设置一个伪元素(名称::after{})

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  	.box{
		width:1075px;
		/* height:1305px; */
		border:3px solid black;
	}
	.box div{
		width:215px;
		height:215px;
		float:left;
	}
	.box>.a{
		background:#e93325;
	}
	.box>.b{
		background:#f1a93d;
	}
	.box>.c{
		background:#377e20;
	}
	.box>.d{
		background:#0000fd;
	}
	.box>.e{
		background:#75147b;
	}
	.box>.f{
		width:655px;
		height:350px;
		background:#f5c2cb;
	}
	.box>.g{
		width:420px;
		height:350px;
		background:#97342f;
	}
	.box>.h{
		width:328px;
		height:350px;
		background:#ffff55;
	}
	.box>.i{
		width:327px;
		height:350px;
		background:#a6eb9a;
	}
	.box>.j{
		width:420px;
		height:520px;
		background:#7d7d7d;
		float: right;
	}
	.box>.k{
		width:655px;
		height:170px;
		background:#b5d6e5;
	}
	.box>.l{
		width:1075px;
		height:215px;
		background:#010101;
	}
	.clear::after{
		content:'';
		display:block;
		clear:both;
	}
  </style>
 </head>
 <body>
	<div class="box clear">
		<div class="a">1</div>
		<div class="b">2</div>
		<div class="c">3</div>
		<div class="d">4</div>
		<div class="e">5</div>
		<div class="f">6</div>
		<div class="g">7</div>
		<div class="h">8</div>
		<div class="i">9</div>
		<div class="j">10</div>
		<div class="k">11</div>
		<div class="l">12</div>
	</div>
 </body>
</html>

 

 

 

  • 5
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值