CS基础 float 浮动的使用方法
html代码:
<body>
<div class='red'> </div>
<div class='green'> </div>
<div class='blue'> </div>
</body>
浮动特点:
1.使用浮动时会脱标,被脱标的物体会向上空飘去,不占用正常流的位置,
此时用的是
.green{
float:right
width:200px
height:200px
background-color:green;
};
2.浮动会比标准流高出半个级别,可以覆盖标准流中的元素
此时使用的是
.green{
float:left;
width:200px;
height:200px;
background-color:green;
};
向左浮动
此时,绿色盒子覆盖了蓝色盒子,是因为特点一,绿盒子在空中漂浮由于左边为最边缘,只能向自己的正向位置漂浮;蓝盒子按照正常流向前,所以蓝盒子才被覆盖在绿盒子之下
3.浮动找浮动,如果所有盒子都浮动的话,后一个浮动盒子将跟随前一个盒子按照标准流浮动
css代码:
div {
float:left;
}
同理,如果整体盒子想右浮动,排列顺序则是蓝、绿、红
4.浮动会受到上面元素的影响
因为第一个盒子本身,是一个块元素,独占一行的特点,导致盒子浮动后不能够到达自己应该到达的位置
解决的方法:将第一个盒子转换为行内块元素即可,将不会受到影响
5.浮动之前,一行将可以显示多个元素 可以为行内元素设置宽、高
以span标签为例子:
html结构
<body>
<span>span标签1 </span>
<span> span标签2</span>
<span> span标签3</span>
</body>
CSS样式 1.:浮动之前
span{
float:left;
width:200px
height:200px
background-color:orange;
}
CSS样式 2.:浮动之后
span{
width:200px
height:200px
background-color:orange;
}
注意:浮动元素不能通过text-align:center;和margin:0 auto,让浮动元素本身居中,但可以让其内容水平居中
CS基础 float 浮动的使用方法的更多相关文章
- css基础-float浮动
float实现文字环绕图片效果: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- CSS 基础 例子 浮动float
一.基本概念 设置了float属性的元素会根据属性值向左或向右浮动,设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后 ...
- float包裹性与破坏性及清除浮动几种方法
1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响” 学习视频录制推荐的教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...
- 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- 子级用css float浮动 而父级不能自适应高度解决方法
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...
- css清除浮动float的几种方法
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...
- float浮动导致父元素高度坍塌的原因及清除浮动方法
一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...
- 归纳篇(一)CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
- CSS| position定位和float浮动
对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...
随机推荐
- java对象分配
1.为什么会有年轻代 我们先来屡屡,为什么需要把堆分代?不分代不能完成他所做的事情么?其实不分代完全可以,分代的唯一理由就是优化GC性能.你先想想,如果没有分代,那我们所有的对象都在一块,GC的时候我 ...
- Element-ui 中对表单进行验证
Element-ui 中对表单(Form)绑定的对象中的对象属性进行校验 如果是直接绑定属性,是可以的,但是绑定对象中的属性就需要特别处理,需要在rules中添加双引号 " "或者 ...
- 3.0 go mod之远程仓库搭建-代码示例
注意事项 所谓的远程仓库指的是github,个人首次使用go mod在其他云仓库上尝试,并未成功,这浪费了我近2小时的时间: 如果你是初次尝试,那么除了github的地址换一下之外,其他的都按照示例操 ...
- 如何使用table布局静态网页
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 【力扣】188. 买卖股票的最佳时机 IV
给定一个整数数组 prices ,它的第 i 个元素 prices[i] 是一支给定的股票在第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你最多可以完成 k 笔交易. 注意:你不能同时参 ...
- 团队协作项目——SVN的使用
参考文献:https://www.cnblogs.com/rwh871212/p/6955489.html 老师接了一个新项目,需要团队共同完成开发任务,因此需要SVN.SVN是C/S架构: 1.服务 ...
- shell脚本 系统状态信息查看
一.简介 源码地址 日期:2018/6/23 介绍:显示简单的系统信息 效果图: 二.使用 适用:centos6+,ubuntu12+ 语言:中文 注意:无 下载 wget https://raw.g ...
- 主流微服务一站式解决方案Spring Cloud Alibaba入门看这篇就足够了
学习路线 **本人博客网站 **IT小神 www.itxiaoshen.com 生态概述 架构演进 什么是微服务 https://martinfowler.com/microservices/ Mic ...
- 『学了就忘』Linux系统管理 — 85、工作管理相关命令
目录 1.工作管理简介 2.如何把命令放入后台 3.后台管理命令 (1)查看后台的工作 (2)将后台暂停的工作恢复到前台执行 (3)把后台暂停的工作恢复到后台执行 4.后台命令脱离登录终端运行 1.工 ...
- LuoguP7019 [NWRRC2017]Auxiliary Project 题解
Update \(\texttt{2021.6.24}\) 修改了一处格式上的错误和一处笔误. Content 已知用 LED 灯来显示 \(0\sim9\) 这十个数字分别需要 \(6,2,5,5, ...