使用样式“clear”和“overflow”消除浮动元素对环绕行框的影响
为元素设置“float”样式之后，元素会脱离标准文档流，不再占据原来的空间。后续元素会向前移动，占据这个新的空间。后续的文本会围绕着浮动元素分布，形成一种环绕布局的现象。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<meta charset="utf-8">
<style type="text/css">
#ele-1 {
width: 100px;
height: 50px;
background-color: #3E3;
float: left;
}
#ele-2 {
width: 500px;
background-color: #EE3;
}
</style>
</head>
<body>
<div id="ele-1">Div area!</div>
<p id="ele-2">
This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!
</p>
</body>
</html>
显示效果如下：
现在分别为“<p>”标签添加“clear:left”和“overflow:hidden”样式，消除这种环绕效果！
添加样式“clear:left”之后，显示效果如下：
添加样式“overflow:hidden”之后，显示效果如下：
可以通过合理的使用这两种样式效果实现页面布局。
使用样式“clear”和“overflow”消除浮动元素对环绕行框的影响的更多相关文章
- HTML。CSS浮动元素详解
浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...
- HTML-CSS浮动元素详解
浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...
- CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}
常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景 <!DOCTYPE html><html><head> <met ...
- CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
分组和嵌套 分组选择器 ——————> 嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...
- CSS围住浮动元素的三种方法
浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...
- CSS浮动元素的水平居中
方法一: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- 清除浮动元素的margin-top失效原因（更改之前的错误）
//样式代码body,div{ margin:; padding:; } .box1{ background:#900; width:200px; height:200px; margin:20px ...
- bfc与浮动元素的关系
首先说明两个特性: 1,浮动元素兄弟元素的布局规则 当html中存在浮动元素时,其兄弟元素的布局遵循如下规则: (1)块级元素的渲染无视浮动元素 (2)文本内容或者是行内元素的渲染会考虑到浮动元素的存 ...
- CSS 教程 - 闭合浮动元素
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素. 但是有时我 ...
随机推荐
- IIS7配置PHP运行环境
1.下载PHP运行包,网址:http://windows.php.net/download/ 选择的对应的版本包下载,并解压到相应的目录中(不限定),如:E:\vss\php\php_sdk 2.配置 ...
- [Prodinner项目]学习分享_第三部分_Service层(业务逻辑层)
前两节讲到怎样生成一个Model和怎样将Model映射到数据库,这一节将讲到业务逻辑层,也就是Service层. 1.Prodinner架构已经构建好的,基本的增删改查. 假设,我现在想操作第二节中讲 ...
- SaltStack实战
SaltStack实战 #安装 安装注意几点 python-libs-2.6.6-64.el6.x86_64 conflicts with file from package python-2.6.6 ...
- Mybatis 批量insert
@Override public int insertHouseTypeScene(int htid, String name, String icon,int sort, List<House ...
- Django1.9开发博客（13）- redis缓存
Redis 是一个高性能的key-value数据库.redis的出现, 很大程度补偿了memcached这类keyvalue存储的不足,在部分场合可以对关系数据库起到很好的补充作用. 它提供了Pyth ...
- NGUI Scroll List
NGUI Scroll List 1.Add GameObject with Script UI Panel(NGUI -> UI -> NGUI Panel) and Script UI ...
- java.util.logging.Logger 使用详解
概述: 第1部分 创建Logger对象 第2部分 日志级别 第3部分 Handler 第4部分 Formatter 第5部分 自定义 第6部分 Logger的层次关系 参考 第1部分 创建Logger ...
- 樱花漫地集于我心，蝶舞纷飞祈愿相随---总结 适者：survival of the fittest 适者：survival of the fittest
编程什么的最讨厌了,总是忘记一些乱七八糟的,看起来并没有什么乱用的,比如(::“<>{}, 还有交作业的时候总是忽略大小写<(▰˘◡˘▰)> 马马虎虎莫名其妙就错了,其实大小写 ...
- eclipse 本地项目提交到远程库以及从远程库中添加项目 ---git
本地项目提交到远程库 1.右击项目->team->share project 2.选择本地库 从远处库中的项目拉到本地 1.右击项目->import项目
- Java：多线程<二> 同步
由于多线程的访问出现延迟和线程的随机性,在使用多线程时往往会伴随安全性的问题,这些问题一旦出现将会是非常严重的.为了解决这种安全性问题,synchronized出现了. synchronized用法一 ...