前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端基础-CSS浮动

前端基础-CSS浮动

作者头像
cwl_java
发布2020-04-01 16:53:44
8170
发布2020-04-01 16:53:44
举报
文章被收录于专栏:cwl_Java

浮动(重点)

浮动最早期做的是图文绕排

代码语言:javascript
复制
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.news{width:500px;border:1px solid #000;overflow:hidden;}
		img{float:left;}  /* 浮动,还可以是right */
	</style>
</head>
<body>
<div class="news">
	环球网综合报道】据日本NHK电视台8月29日报道,117岁的玻利维亚女性朱丽叶•弗洛雷斯•科尔克(Julia Flores Colque)被认为是目前世界上最长寿的老人。这位老人近日边弹奏弦乐边唱歌的视频画面引起热议。
	<img src="myweb/1.png" alt="" />
科尔克居住在玻利维亚中部的高地上。玻利维亚政府颁发的出生证明显示,老人生于1900年10月26日,今年10月她将迎来118岁的生日。除了有些耳背外科尔克身体健康,经常弹奏一种叫恰兰戈的小吉他,用安第斯山特有的奇楚亚语演唱民歌,她终身未婚未育。
</div>
</body>

浮动的语法:

代码语言:javascript
复制
float:left/right   /none

取值:left向左浮动,right向右浮动,none取消浮动

现在的浮动,用的最多是让块元素在同一行显示:就是给一行的所有块元素都加上浮动

浮动的最大价值:让元素排列成一行,或者一左一右

浮动的使用口诀:

​ 1.要浮动,兄弟元素也一起浮动

​ 2.浮动方向保持一致(尽量都是用左浮动)

总结:

​ 1.可以做图文绕排

​ 2.主要让块元素排一行,多个元素一起浮动

​ 3.注意加了浮动以后元素的顺序,标签顺序,浮动方向

​ 4.浮动的元素脱离标准流

1.行元素浮动

行元素浮动,会优先于普通元素占据设置方向的位置,不会重叠

2.块元素浮动

块元素浮动,会脱离页面原本的文本流(不占据原本的空间),会覆盖其他元素

多学一招:

1.脱离文本流的元素具有行内的块元素的特性(不换行,能设置宽高),无论原来是行元素还是块元素–例:图文绕排。

2.设置了浮动的元素,居中对元素不起作用

3.浮动元素不会覆盖文字

4.大盒子放不下了,浮动元素会掉下去,掉下去的元素位置根据上一个元素的高度:(1)上一个元素高度比较小,在上一个元素的正下方(2)上一个元素高度比较大,高度的起始位置,在上一个元素的下方

总结:

​ 1.所有元素浮动后都变成了行内块

​ 2.浮动元素不能覆盖文字

浮动引起的问题:

代码语言:javascript
复制
<style>
		
		/* 浮动的盒子撑不开父容器 
			
			解决办法:强制追加一个高度(不推荐,因为很多时候盒子的高度是会变化的)
		*/

		.box {
			width: 500px;
			border: 1px solid #000;
		}
		.info {
			width: 100px;
			height: 100px;
			background-color: green;
			float: left;
		}
		.gebilaowang {
			width: 500px;
			height: 300px;
			background-color: lime;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="info">1</div>
		<div class="info">2</div>
		<div class="info">3</div>
		<div class="info">4</div>
	</div>
	<div class="gebilaowang"></div>

3.清除浮动

就是清除浮动带来的影响,普通元素不受浮动元素影响

a) 给父元素设置高度(不推荐,因为在项目中很多盒子是不固定高度的)

b 在父元素后设定空标签进行清除浮动

语法:clear:both

c) 设定父元素的overflow

overflow的原理:overflow可以创建一个BFC(块级格式化上下文 (Block Fromatting Context)),按照块元素布局,BFC是一个独立的布局环境,其中的元素布局是不受外界的影响。说白了就是将盒子内部的元素和外部的元素进行隔离,互不影响。

d) 使用伪对象代替空标签

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/03/30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 浮动(重点)
    • 1.行元素浮动
      • 2.块元素浮动
        • 浮动引起的问题:
          • 3.清除浮动
          相关产品与服务
          容器服务
          腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档