CSS深入理解之float(HTML/CSS)
float的设计初衷仅仅是:为了文字环绕效果
float的包裹与破坏
包裹:收缩、坚挺、隔绝(BFC)
破坏:父元素高度塌陷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
.box{
border: 1px solid red;
width: 300px;
margin: 20px auto;
}
.left{
float: left;
height: 100px;
width: 50px;
border: 1px solid black;
}
.right{
float: right;
height: 100px;
width: 50px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
如何降低float破坏性的影响(清除浮动)?
1、底部插入clear:both;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
.box {
border: 1px solid red;
width: 300px;
margin: 20px auto;
}
.clearfix {
clear: both;
}
.left {
float: left;
height: 100px;
width: 50px;
border: 1px solid black;
}
.right {
float: right;
height: 100px;
width: 50px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
.box {
border: 1px solid red;
width: 300px;
margin: 20px auto;
}
.box:after {
content: '';
display: block;
height: 0;
overflow: hidden;
clear: both;
}
.left {
float: left;
height: 100px;
width: 50px;
border: 1px solid black;
}
.right {
float: right;
height: 100px;
width: 50px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
.box {
border: 1px solid red;
width: 300px;
margin: 20px auto;
}
.box:after {
content: '';
display: table;
clear: both;
}
.left {
float: left;
height: 100px;
width: 50px;
border: 1px solid black;
}
.right {
float: right;
height: 100px;
width: 50px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
2、父元素BFC/haslayout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
.box {
border: 1px solid red;
width: 300px;
margin: 20px auto;
overflow: hidden;
}
.left {
float: left;
height: 100px;
width: 50px;
border: 1px solid black;
}
.right {
float: right;
height: 100px;
width: 50px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
float的特性
1、元素block块状化(砖头化);
2、破坏性造成的紧密排列特性(去空格化)。
CSS深入理解之float(HTML/CSS)的更多相关文章
- CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
- CSS深入理解之absolute(HTML/CSS)
absolute和float是同父异母的兄弟,因为它们具有相同点:包裹性与破坏性 absolute的特点 1.独立的,并且可以摆脱overflow的限制,无论是滚动还是隐藏: 2.无依赖,不受rela ...
- CSS display:inline和float:left两者区别探讨
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...
- CSS 中,用 float 和 position 的区别是什么?
CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...
- CSS深入理解之overflow
CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...
- jsp学习---css基础知识学习,float,position,padding,div,margin
1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- CSS深入理解之line-height
以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 定义三问: 什 ...
- 关于DIV+CSS和XHTML+CSS的理解
WEB标准是一系列标准的集合,并不是仅“DIV+CSS”布局就可以实现.以CSS网页布局只是标准的基础之一.“DIV+CSS”布局只是一种通俗的称呼罢了.而我们学习的目标在于以XHTML建立良好的语义 ...
- CSS初步理解
近期在学习牛腩的时候遇到了网页的制作.挺新奇的.其中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间.找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容.有关CSS的基础知识详见下 ...
随机推荐
- (转)解锁MySQL备份恢复的4种正确姿势
本文根据DBAplus社群第104期线上分享整理而成. 原文:http://dbaplus.cn/news-11-1267-1.html 讲师介绍 冯帅 点融网高级DBA 获有Oracle OCM ...
- C# 对象哈希码
FCL的设计者认为,如果能将任何对象的任何实例放到哈希集合中,能带来很多好处.但是这里说一点,还是会存在,哈希码类似的情况,这一点大型网站架构这本书中有介绍,最好做下MD5算法.为此,System.O ...
- EF 通过DataAnnotations配置属性和类型
一.通过Attribute配置约束 1.主键约束 通过KeyAttribute来配置主键约束,代码如下: [Key] public int PrimaryKey{ get; set; } 2.外键约束 ...
- 【JQuery源码】事件绑定
事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...
- golang-利用反射给结构体赋值
由于想给一个结构体的部分成员赋值,但是有不知道具体名字,故将tag的json名字作为索引,按照json名字来一一赋值 1.通过tag反射//将结构体里的成员按照json名字来赋值 func SetSt ...
- 【Express系列】第1篇——项目创建
安装 node 和 Express 4 node官网:http://nodejs.org/ Express Github:https://github.com/expressjs/express ...
- Java SPI机制和使用示例
JAVA SPI 简介 SPI 是 Java 提供的一种服务加载方式,全名为 Service Provider Interface.根据 Java 的 SPI 规范,我们可以定义一个服务接口,具体的实 ...
- NLP 装桶(Bucketing)和填充(padding)
翻译模型也是用了装桶(bucketing)和填充(padding),这两种方法是用于高效地处理不同长度句子的情况.我们首先来弄清楚是怎么一回事.当我们从英语翻译成法语的时候,假设我们的输入英语的长度为 ...
- windows server 2012 如何开启 hyper-v 并创建虚拟机
当我们拿到一台新的windows server 2012 服务器的时候,默认hyper-v是没有开启的,如果我们要在windows server上面创建虚拟机,那么我们也就需要开启hyper-v. 开 ...
- struct in_addr 结构体
struct in_addr 结构体: struct in_addr { in_addr_t s_addr; }; 表示一个32位的IPv4地址. in_addr_t一般为32位的unsigned i ...