元素得到 'pulled' 进入段落

Question

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

我的代码：

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;
}

<!DOCTYPE html>
<html>
    
    <head>
        <title>Whosebug</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>

有人可以向我解释为什么会发生这种情况吗，因为我对网络开发还很陌生？

Answer 1

知道了 RE: '其他 html 元素进入段落 'pulled'。不过我希望他们在外面。'

您的段落与浮动元素内嵌。您需要清除浮动以使该段落位于下方。为此，请将您的段落包装在 div（class 称为 'clearfloat'）中，然后添加值为 css 'clear' 属性 23=] 到 div.

HTML:

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

CSS:

.clearfloat { 
clear:both;
}

元素得到 'pulled' 进入段落

Elements get 'pulled' into paragraph

html

css

paragraph

css-float