使用样式“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)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素. 但是有时我 ...
随机推荐
- 《BI那点儿事》数据流转换——导入列、导出列
导入列: 导入列例子现在来做一个例子:创建路径D:\Pictures随便在路径D:\Pictures中粘贴4个比较小的图像文件命名为01.png.02.png.03.png.04.png在路径D:\P ...
- fifter常见的运用场景
没配置过滤器 package servlet; import java.io.IOException; import javax.servlet.ServletException; import ja ...
- cellery ImportError & AttributeError
一.zz的问题 celery 运行work要进入到 文件所在的文件夹下执行 二.AttributeError: 'Flask' object has no attribute 'user_option ...
- webstrom使用方法
一.设置file-settings- -color&fonts设置,字体 主体 -file and code templates模板ctrl+r 查找,替换1 双击shift 快速查找2 fi ...
- AVKit & MediaPlayer简写
@import AVKit; @import AVFoundation; NSString *address = [[NSBundle mainBundle]pathForResource:@&quo ...
- MFC编程入门之十七（对话框：文件对话框）
上一讲介绍的是消息对话框,本节讲解文件对话框.文件对话框也是很常用的一类对话框. 文件对话框的分类 文件对话框分为打开文件对话框和保存文件对话框,相信大家在Windows系统中经常见到这两种文件对话框 ...
- 笨办法学 Python （Learn Python The Hard Way）
最近在看:笨办法学 Python (Learn Python The Hard Way) Contents: 译者前言 前言:笨办法更简单 习题 0: 准备工作 习题 1: 第一个程序 习题 2: 注 ...
- SPSS常用基础操作（2）——连续变量离散化
首先说一下什么是离散化以及连续变量离散化的必要性. 离散化是把无限空间中无限的个体映射到有限的空间中去,通俗点讲就是把连续型数据切分为若干“段”,也称bin,离散化在数据分析中特别是数据挖掘中被普遍采 ...
- C++ template的一些高级用法（元编码，可变参数，仿函数，using使用方法,. C++ 智能指针）
1 . 通用函数可变参数模板 对于有些时候,我们无法确切的知道,函数的参数个数时,而又不想过多的使用所谓的函数重载,那么就可以效仿下面的例子: #include<iostream> #i ...
- windows添加虚拟网卡