js操作css的float属性导致控件变窄问题的解决

作者: 唐T唐X | 来源:发表于2017-09-17 15:12 被阅读91次

js操作css的float属性导致控件变窄问题的解决
面试总结
HTML5小记十五
css定位
js基础小结（2）
清除浮动
CSS布局
5 requestAnimationFrame、客户端存储、历史
CSS中的float定位技术在iOS上的实现
CSS-定位5-清楚浮动

最近在写js操作css的过程中发现float属性一个问题，觉得很有必要记录下来，直接先上代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 折叠面板</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title" style=float:left>
                <a data-toggle="collapse" data-parent="#accordion" 
                   href="#collapseOne">
                    点击我进行展开，再次点击我进行折叠。第 1 部分
                </a>
            </h4>
            <a style=float:right; href=javascript:copy();>复制本事件到顶端</a>

        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                vice lomo.
            </div>
        </div>
    </div>
</div>

</body>
</html>

网页的长相是这样的：

1.png

很明显，显示不是很正常。我们其实是想用float属性实现折叠控件的抬头区域左边和右边分别可以布局不同的控件，目前看虽然分为左右两边这个目的是达到了，但是折叠控件抬头的高度明显窄了好多。
通过询问公司的前端大牛，才知道其实解决方案很简单，就是在有float属性的空间下面加入一行“<div style=clear:both></div>”

加上后的效果：

2.png

为什么会出现收窄的情况呢？来看看float属性的定义吧：

定义和用法

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

尽可能的窄，也是醉了~ 那这时候就需要clear样式属性出马了！

我们知道有时使用了css float浮动会产生css浮动，这个时候就需要清理清除浮动，我们就用clear样式属性即可实现。

下面附上完整源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 折叠面板</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title" style=float:left>
                <a data-toggle="collapse" data-parent="#accordion" 
                   href="#collapseOne">
                    点击我进行展开，再次点击我进行折叠。第 1 部分
                </a>
            </h4>
            <a style=float:right; href=javascript:copy();>复制本事件到顶端</a>
            <div style=clear:both></div>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                vice lomo.
            </div>
        </div>
    </div>
</div>

</body>
</html>

得到帮助的网页：
http://www.w3school.com.cn/cssref/pr_class_float.asp
http://www.divcss5.com/rumen/r424.shtml