Blogger Information
Blog 8
fans 0
comment 0
visits 4514
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
关于overflow:hidden清除浮动
ZeroUp的博客
Original
816 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>关于overflow:hidden清除浮动</title>
</head>
<body>
	<header style="height: 50px;background: cyan;">若父元素没固定高度而由子元素撑开,而子元素有浮动属性,那么通过在父元素中添加overflow:hidden可以达到清除浮动效果</header>
	<div class="container" style="/*! overflow: hidden; */clear: both;">
		<div class="main" style="min-height: 600px;background: yellowgreen;width: 300px;float: left;/*! clear: both; */">若父元素添加固定高度,那么设置overflow:hidden后子元素超出范围的部分不会显示</div>
	</div>

	<footer style="height: 50px;background: coral;/*! clear: both; */"></footer>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post