围住浮动元素的三种方法

原创 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's fun to float. Here is the footer element that runs across the bottom of the page.se...

围住浮动元素的三种方法

围住浮动元素的三种方法 It’sfun to float. Hereis the footer element. (1)、为...

围住浮动元素的三种方法

css清除与浮动

ie6中容器内浮动元素的border边框不完全显示的bug

ie6中容器内浮动元素的border边框不完全显示的bug html                      职位名称  &#...

ie6/7下 li内浮动元素下边距4像素bug解决方案

问题: 在IE6/7 下,如果给li的元素有浮动,则会造成li下边距多出四个像素的问题,如图所示:解决方案: 1、给li添加:vertical-align属性,除baseline的任意值 2、去掉高、...

关于浮动元素的经典考题

请看下面代码:如何在不改变上述代码、不使用绝对定位和相对定位的情况下,实现如下效果图: 答案如下: HTML5 * {margin:0;padding:0;} .one { ...

浮动元素的两端对齐

当我们使用float来使元素并排显示的时候,可以使用margin来控制元素之间的距离,而在很多版式里(例如产品图片的列表),需要浮动的元素达到两端对齐的效果。单纯使用float:left或者float...

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

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

IE6 7 下右浮动元素自动换行问题

IE6 7 下右浮动元素自动换行问题问题原因: IE6 IE7 IE8(Q) 下,若浮动元素之前存在兄弟行内非浮动元素,IE 会将浮动元素所在的“当前行”认为是其前边的兄弟行内元素所...

html css控制浮动元素居中显示

基本的html结构: <!-- 1 2 3 4 5 --> p1 p2 p3 p4 p5 欲实现效果: 浮动元素居中的出现
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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