围住浮动元素的三种方法

原创 2016年08月29日 18:49:12
<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		section{
			border: 1px solid blue;
			margin: 0 0 10px 0;
		}
		p{
			margin: 0 auto;
		}
		footer{
			border: 1px solid red;
		}
		img{
			float: left;
		}
	</style>
</head>
<body>
	<section>
		<img src="1.jpg" alt="">
		<p>it's fun to float!</p>
	</section>
	<footer>
		abcdefghijklmnopqrstuvwxyz,abcdefghijklmnopqrstuvwxyz.
	</footer>
</body>
</html>




1、为父元素添加overflow:hidden

section{

         overflow:hidden;

}

2、同时浮动父元素

section{

     float:left;

}

3、添加非浮动的清除元素

<section>
		<img src="1.jpg" alt="">
		<p>it's fun to float!</p>
		<div class="clear_me"></div>
</section>

.clear_me{
			clear: left;
		}
或者给section添加clearfix类
.clearfix{

          clear:both;

}


围住浮动元素的三种方法

围住浮动元素的三种方法 It’sfun to float. Hereis the footer element. (1)、为...
  • xinweilaizhe
  • xinweilaizhe
  • 2017年07月17日 23:39
  • 128

围住浮动元素的三种方法

当有浮动元素时: It's fun to float. Here is the footer element that runs across the bottom of the page.se...
  • u012193330
  • u012193330
  • 2015年06月20日 13:40
  • 601

围住浮动元素的三种方法

css清除与浮动
  • hoho_12
  • hoho_12
  • 2016年03月28日 20:36
  • 222

css清除浮动float的三种方法总结

摘要 css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一、抛一块问题砖(display: block)先看现象:     分析HTML代码结构:...
  • u011153667
  • u011153667
  • 2016年08月12日 16:48
  • 2184

html清除浮动的几种方式

方法一(使用空标签带clear属性)标签可以是div br hr 在浮动元素后使用一个空元素如, 并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用 或来进行清理。 优点...
  • zjbkzj
  • zjbkzj
  • 2017年05月19日 14:52
  • 500

围住浮动元素的3种方法

没有围住浮动元素 Document section{ border:1px solid #0f0; ma...
  • niexia_
  • niexia_
  • 2017年07月30日 23:34
  • 87

html5和css篇有关浮动以及如何清除浮动

言归正传,今天主要想说一下,div层浮动的问题。 回忆一下,html的块元素主要有哪些:div ul ol p hr h1-h6 ,这是今天用到的,这些块元素都会独占一行,块元素会按照先后顺序从新的一...
  • NA_SAMA
  • NA_SAMA
  • 2016年03月15日 22:52
  • 1579

CSS清除浮动的几种方法

浮动的几个重要性质首先,浮动有几个很重要的性质 脱标:脱离标准文档流 贴边(浮动会紧贴着浮动方向的边 字围(浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动...
  • u011342403
  • u011342403
  • 2017年04月24日 06:49
  • 755

如何实现浮动元素水平居中

浮动元素如何水平居中?margin:0 auto为什么不起作用?其实方法很简单,只需要在浮动元素外面再嵌套一层div,使嵌套的div宽度为浮动元素宽度之和,即可实现真正的水平居中。...
  • renxinzhewudi
  • renxinzhewudi
  • 2017年02月19日 16:02
  • 4320

css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')

摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一、抛一块问题砖(display: block)先看现象:     分析HTML代码结构: div cl...
  • goulei2010
  • goulei2010
  • 2017年01月02日 16:08
  • 1178
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:围住浮动元素的三种方法
举报原因:
原因补充:

(最多只允许输入30个字)