Question

在我的HTML中添加一些CSS时，我偶然发现了这种奇怪的行为，如屏幕截图所示： Screenshot in Chrome。我想知道是否有人可以向我解释为什么每当我将按钮向左浮动时（CSS中）就会发生这种情况。

我的代码：

＆＃13;

body {
    margin: 0px;
    padding: 0px;
}

/* Classes */
.smallButton {
    /* Button */
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 15px;
    outline: none;
}

.largeButton {
    /* Button */
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 30px;
    outline: none;
}

/* Individuals */
#toolList {
    float: left;
    vertical-align: top;
}

#bmenuButton {
    float: left;
}

#textField {
    width: 500px;
    height: 500px;
}

＆＃13;

<!DOCTYPE html>
<html>
    
    <head>
        <title>Stackoverflow</title>
        <!-- Stylesheets -->
        <link type="text/css", href="css/styles.css", rel="stylesheet">
    </head>
    
    <body>
        <div id="toolList">
            
            <!-- Sidebar button -->
            <button id="bmenuButton" class="largeButton">BurgerMenu Button</button>
            
            <!-- Toolbar A -->
            <div id="toolBarA">
                <!--1st line -->
                <div id="toolLineA">
                    <!-- Fonts --> 
                    <select>
                        <option value="Times New Roman">Times New Roman</option>
                        <option value="Arial">Arial</option>
                    </select>
                </div>
                <!--2nd line -->
                <div id="toolLineB">
                    <!-- Formatting -->
                    <button class="smallButton">Bold</button>
                    <button class="smallButton">Italic</button>
                    <button class="smallButton">Underline</button>
                    <button class="smallButton">Crossthrough</button>
                    <!-- Alignments -->
                    <button class="smallButton">Left</button>
                    <button class="smallButton">Center</button>
                    <button class="smallButton">Right</button>
                    <!-- Utility -->
                    <button class="smallButton" disabled>Undo</button>
                    <button class="smallButton" disabled>Redo</button>
                    <!-- Document -->
                    <button class="smallButton">Print</button>
                </div>
            </div>
            
        </div>     
        
        <!-- Text field -->
        <p id="textField", contenteditable="true">Contenteditable paragraph text</p>
    </body>
    
</html>

＆＃13;

有人可以向我解释为什么会发生这种情况吗？我对网络开发还不熟悉吗？

Answer 1

得到了RE：＆＃39;其他html元素被“拉”＆＃39;进入段落。我希望他们能在外面。＆＃39;

您的段落与您的浮动元素内嵌在一起。您需要清除浮动以使段落位于下方。要执行此操作，请将段落包装在div（名为＆＃39; clearfloat＆＃39;的类）中，然后添加css＆＃39; clear＆＃39;有价值的财产＆＃39;两个＆＃39;到了div。

HTML：

<div class="clearfloat">
<p id="textField", contenteditable="true">Contenteditable paragraph text</p>
</div>

CSS：

.clearfloat { 
clear:both;
}

元素得到了拉动＆＃39;进入段落

1 个答案: