使用样式“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)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素. 但是有时我 ...
随机推荐
- [Mysql] 一些记录
1> 修改表的字段 alter table trade_market change reqype reqtype int(10) unsigned not null;alter table tr ...
- Json2JsonArray JsonArray2StringArray
public String[] json2JsonArray(String str){ JSONArray jsonArray = JSONArray.fromObject(str); String[ ...
- (转)Uiautomator——API详解
原文链接:http://www.cnblogs.com/by-dream/p/4921701.html#3328376 以一个简单的例子开始吧.我们完成一个 " 打开QQ,进入QQ空间,然后 ...
- JavaScript数组API
1.将数组转化为字符串:2种: 1.var str=String(str); 将数组转化为字符串并分隔每个元素 ...
- TCP && UDP
TCP(Transmission Control Protocol,传输控制协议) 是面向连接的协议,也就是说,在收发数据前,必须和对方建立可靠的连接. TCP建立连接要进行3次握手,而断开连接要进行 ...
- javascript 技巧
1.将arguments转化为数组函数中的预定义变量arguments并非一个真正的数组,而是一个类似数组的对象. 它具有length属性,但是没有slice, push, sort等函数,那么如何使 ...
- contextloaderlistener
http://blog.csdn.net/c5153000/article/details/6234207 作用:在启动Web容器时,自动装配Spring applicationContext.xml ...
- nginx全局变量实例对照 rewrite参考手册
http://dwz.stamhe.com/index.php?_a=index&_m=show&count=10 remote_addr 客户端ip,如:192.168.4.2 bi ...
- PHP中字符串的连接和换行
PHP中字符串的连接使用点,不是加号.换行\n需要用双引号括起来,不能用单引号. eg. <?php print_r("hello"."\n"); pri ...
- CodeForces #367 div2 D Trie
题目链接:Vasiliy's Multiset 题意:这里有一个set容器,有三种操作,+ num, - num, ? num,分别代表往容器里加上num,或者拿走num,或着从容器里找一个数temp ...