css浮动的ie7兼容问题，下边距增加_html/css

css浮动的ie7兼容问题，下边距增加_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:24:13

原创

1632人浏览过

大box内左右浮动两个box，左侧box内有黄色部分（不浮动）和下方左右浮动的两个蓝色部分。
在ie7下，大box下方似乎多了一个padding-bottom的距离，现在要求内部所有部分高度是自动的。
正常情况下：

ie7下：

不使用的方法：
1、黄色部分也浮动；//因为右侧黄色box有时内部也有复杂的内容布局，不能做到全部浮动
2、ie7hack；
3、固定高度；
那么还有高明的什么方法呢？
代码如下

<style>*{ margin:0; padding:0;}li{ list-style:none;}.fix{zoom:1;}.fix:after{content:""; display:block; clear:both; height:0; visibility:hidden;}.box{ width:400px; margin:0 auto; border:1px solid #f69; margin-bottom:20px; margin-top:50px;}.box_left{ width:260px; float:left;}.box_right{ width:120px; float:right; background:#ffc;}.not_float{ width:100%; height:40px; margin-bottom:20px; background:#ffc;}.ready_float_left{ width:160px; float:left; background:#09f; color:#fff;}.ready_float_right{ width:80px; float:right; background:#09f; color:#fff;}.box2{ width:400px; height:100px; margin:0 auto; border:1px solid #f69;}</style></head><body><div class="box fix">	<div class="box_left">		<div class="not_float">					</div>		<div class="ready_float_left">			<ul>				<li>1</li>				<li>2</li>				<li>3</li>				<li>4</li>				<li>5</li>				<li>6</li>				<li>7</li>				<li>8</li>				<li>9</li>				<li>10</li>			</ul>		</div>		<div class="ready_float_right">			<ul>				<li>1</li>				<li>2</li>				<li>3</li>				<li>4</li>				<li>5</li>				<li>6</li>				<li>7</li>				<li>8</li>				<li>9</li>				<li>10</li>			</ul>		</div>	</div>	<div class="box_right">		<ul>			<li>1</li>			<li>2</li>			<li>3</li>			<li>4</li>			<li>5</li>			<li>6</li>			<li>7</li>			<li>8</li>			<li>9</li>			<li>10</li>		</ul>	</div></div><div class="box2"></div>

登录后复制

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

回复讨论(解决方案)

.not_float{ width:100%; height:40px; background:#FFC;}.ready_float_left{ width:160px; float:left; margin-top:20px; background:#09f; color:#fff;}.ready_float_right{ width:80px; float:right; margin-top:20px; background:#09f; color:#fff;}

登录后复制

not_float 的margin-bottom出问题，增加一个向左浮动float:left;