专栏首页cwl_Java前端基础-CSS浮动

前端基础-CSS浮动

浮动(重点)

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

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

浮动的语法:

float:left/right   /none

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

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

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

浮动的使用口诀:

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

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

总结:

​ 1.可以做图文绕排

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

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

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

1.行元素浮动

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

2.块元素浮动

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

多学一招:

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

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

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

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

总结:

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

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

浮动引起的问题:

<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) 使用伪对象代替空标签

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JDK1.9-数据结构

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    cwl_java
  • 前端基础-jQuery节点操作

    cwl_java
  • JDK1.9-Iterator迭代器

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    cwl_java
  • 常用页面布局分享

    用户2145235
  • 带你熟悉CSS浮动

      浮动:顾名思义先浮后动,浮动的对象会先漂浮起来,离开自己原来的位置(也就是所谓的脱离文档流),后动的意思是,它的后面的元素会向它原来的位置动起来。

    阿豪聊干货
  • CentOS6.5基于AD域账号联动认证的vsftpd结合SSL加密服务器配置

        如果安装了SElinux且不懂配置的,建议将其关闭。方法是修改/etc/selinux/config文件的如下内容:

    木子-Lee
  • 大数据技术之_12_Sqoop学习_Sqoop 简介+Sqoop 原理+Sqoop 安装+Sqoop 的简单使用案例+Sqoop 一些常用命令及参数

      Sqoop 是一款开源的工具,主要用于在 Hadoop(Hive) 与传统的数据库 (mysql,postgresql,...) 间进行数据的高校传递,可...

    黑泽君
  • 前端成神之路-浮动

    CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:

    海仔
  • python集合常用方法

    多维列表:list[axis1_index,axis2_index],通过不同轴上的坐标获取

    py3study
  • 【技术分享】二:搜索排序—工业流程

    导语:对于做算法的而言,了解一下整个流程是必要的。一来加深对整个环节的理解,二来:方便在定位badcase的知道可能是那块的问题所在。

    腾讯智能钛AI开发者

扫码关注云+社区

领取腾讯云代金券