用css样式设置了左右浮动可是只右浮动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用css样式设置了左右浮动可是只右浮动相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="headerBar">
<div class="topBar">
<div class="comWidth">
<div class="letfArea">
<a href="#" class="collection">收藏慕课</a>
</div>
<div class="rightArea">
欢迎来到慕课网！<a href="#">[登录]</a><a href="#">[免费注册]</a>
</div>
</div>
</div>
<div class="logoBar">
<div class="comWidth">
<div class="logo fl">
<a href="#"><img src="img/logo.jpg" alt="慕课网"></a>
</div>
<div class="search_box fl">
<input type="text" class="serach_text" >
<input type="button" value="搜 索" class="search_btn">
</div>
<div class="shopCar fr">
<span class="shopText">购物车</span>
<span class="shopNum">0</span>
</div>
</div>
</div>
<div class="navBox">
<div class="comWidth">
<div class="shopClass">
<h3>商品列表</h3>
</div>
<ul class="nav">
<li><a href="#">数码城</a></li>
<li><a href="#">数码城</a></li>
<li><a href="#">数码城</a></li>
<li><a href="#">数码城</a></li>
<li><a href="#">数码城</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
/*css样式*/
/*清零*/
body,ul,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,iputmargin:0;padding:0;
bodyfont-size:12px;
imgborder:none;
lilist-style:none;
input,select,textareaoutline:none;
textarearesize:none;
atext-decoration:none; color: #656565;
/*清空浮动*/
.clearfix:aftercontent:""; display:block; clear:both;
.clearfix(zoom:1)
.flfloat: left;
.frfloat: right;
.fl 为左浮动 .fr为右浮动 加到了 logo ，search_box，shopCar 三个div 中，只有shopCar右浮动 其他没变化
你犯了一个细节错误。我刚查看了你的css，为什么fr有效，fl却无效。因为你fl上面的样式属性写错了.clearfix(zoom:1)应该是.clearfixzoom:1。是大括号，所以造成了fl无效。
感谢大神，另外一个问题我搜索框内的TEXT文本，文字位置总是调整不好。 总是在靠左上角位置，用padding值大了撑破容器，小了文字位置没改变
追答用padding调左面和上面的距离就行，如果不行，就调text的高度height属性试试。记得采纳我
参考技术A 1：<div class="logo fl"><a href="#"><img src="img/logo.jpg" alt="慕课网"></a>
</div>
2：<div class="search_box fl">
<input type="text" class="serach_text" >
<input type="button" value="搜 索" class="search_btn">
</div>
<div class="shopCar fr">
<span class="shopText">购物车</span>
<span class="shopNum">0</span>
</div>
你看俩个代码的不同，1能浮动是应为直接作用在div下的元素img，2和3是作用在整个divbox里的， class="serach_text"class="shopText"会影响其元素的效果，可能其中有个position:absolute（绝对定位）绝对定位与float浮动不能同时使用
清除浮动clearfix
css用clearfix清除浮动
什么是.clearfix
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
<div class="clearfix">
<div class="floated"></div>
</div>
上述代码说明：
.clearfix:after {
content: "."; /*内容为“.”就是一个英文的句号而已。也可以不写。*/
display: block; /*加入的这个元素转换为块级元素。*/
clear: both; /*清除左右两边浮动。*/
visibility: hidden; /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/
line-height: 0; /*行高为0；*/
height: 0; /*高度为0；*/
font-size:0; /*字体大小为0；*/
}
.clearfix { *zoom:1;} /*这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/
上面的代码就是.clearfix的定义和应用，简单的说下.clearfix的原理：
1、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。
2、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。
3、在需要清除浮动的时候，只要写一个.clearfix就行了，然后在需要清浮动的元素中 添加clearfix类名就好了。
实例：
<html >
<head>
<title> css用clearfix清除浮动实例</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<style type="text/css">
/*所有主流浏览器都支持 :after 伪元素。*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}/*不知道有什么用处，不加ie7也没有问题*/
.box{ background:#111;width:500px; position:relative;}
.l{float:left; background:#333;width:200px; height:100px;}
.r{float:right;background:#666;width:200px; height:200px;}
.s{width:100px; height:100px;background:#999;position:absolute;right:-50px;;}
</style>
<div class="box clearfix">
<div class="l">left</div>
<div class="r">right</div>
<div class="s">absolute</div>
</div>
</body>
</html>
以上是关于用css样式设置了左右浮动可是只右浮动的主要内容，如果未能解决你的问题，请参考以下文章