H5 59-浮动元素的脱标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>59-浮动元素的脱标</title>
<style>
.box1{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 150px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<!--
1.什么是浮动元素的脱标?
脱标: 脱离标准流
当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标 2.浮动元素脱标之后会有什么影响?
如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素
-->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
H5 59-浮动元素的脱标的更多相关文章
- CSS---文档流布局 | 脱标-postion-zindex | 脱标-浮动
一.css文档流布局概念 1.1,什么是标准文档流 1.2,标准文档流下有哪些微观现象 二.CSS---position属性 2.1,position:relative 2.2,position:fi ...
- HTML连载45-浮动元素脱标、排序规则、贴靠现象
一.浮动元素脱标 1.什么是浮动元素脱标 脱标:脱离标准流. 当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样 2.浮动元素脱标之后有什么影响 如果前面一个元素浮动了,而后面的一个元 ...
- CSS 规避脱标之两种用法
大家好,我是小强老师,今天讲解一小点知识哈 对比了才知道什么好 看不出,很漂亮吧! 有木有倾国倾城的美色. 呵呵,好多东西也是这样的,好的东西只有对比了才觉得好. 我们知道我们网页布局 有三模式. ...
- CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图
规避脱标 定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...
- 李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识 1.1 浮动 特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素 作 ...
- CSS——规避脱标流和vertical-align
规避脱标流: 1.尽量使用标准流. 2.标准流解决不了的使用浮动. 3.浮动解决不了的使用定位. 问题解决:嵌套盒子在不使用定位的情况下定位到右上角 <!DOCTYPE html> < ...
- 关于BFC不会被浮动元素遮盖的一些解释
简介 在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为.规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box. ...
- HTML。CSS浮动元素详解
浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...
- 使用样式“clear”和“overflow”消除浮动元素对环绕行框的影响
为元素设置“float”样式之后,元素会脱离标准文档流,不再占据原来的空间.后续元素会向前移动,占据这个新的空间.后续的文本会围绕着浮动元素分布,形成一种环绕布局的现象. 示例代码: <!DOC ...
随机推荐
- Spring入门详细教程（二）
前言 本篇紧接着spring入门详细教程(一),建议阅读本篇前,先阅读第一篇.链接如下: Spring入门详细教程(一) https://www.cnblogs.com/jichi/p/1016553 ...
- Navicat Premium 连接oracle ORA-01017：用户名/口令无效；登陆被拒绝
解决的方法就是将用户名改成system
- 在Ubuntu 12.04下创建eclipse的桌面链接
在Ubuntu 12.04下创建eclipse的桌面链接 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在Ubuntu 12.04上安装Hadoop并 ...
- 自定义Chrome浏览器
一.全局 自用备份,窗体透明化.要添加对应网站的窗体class到对应的位置 /*主页背景*/ /*https://images.cnblogs.com/cnblogs_com/AardWolf/135 ...
- 17秋 软件工程 团队第五次作业 Alpha
题目:团队作业--Alpha冲刺 17秋 软件工程 团队第五次作业 Alpha 12次Scrum 第一次Scrum 第二次Scrum 第三次Scrum 第四次Scrum 第五次Scrum 第六次Scr ...
- Beta冲刺博客汇总（麻瓜制造者）
Beta冲刺博客 Beta冲刺(1/5)(麻瓜制造者) Beta冲刺(2/5)(麻瓜制造者) Beta冲刺(3/5)(麻瓜制造者) Beta冲刺(4/5)(麻瓜制造者) Beta冲刺(5/5)(麻瓜制 ...
- 删除window10没用的服务
最近学习了下resin,出了个问题,它默认端口是8080,跟Tomcat冲突了,我在使用的时候遇到了个奇怪的事情,resin4.0一直占用着我的8080端口,哪怕我用dos命令把它强制停止,不出五秒钟 ...
- nginx+keepalived高可用及双主模式
高可用有2中方式. 1.Nginx+keepalived 主从配置 这种方案,使用一个vip地址,前端使用2台机器,一台做主,一台做备,但同时只有一台机器工作,另一台备份机器在主机器不出现故障的时候, ...
- ContentTypes 的应用
ContentTypes django 中的一个应用程序(app),可以跟踪Django项目中安装的所有模型(Model),提供用于处理模型的高级通用接口. Contenttypes应用的核心是Con ...
- 思考与算法：大脑是cpu、思考是算法
思考与算法:大脑是cpu.思考是算法