Установите высоту для предыдущего родительского элемента. Примечание. В разработке предприятия не пишите высоту, если вы можете это сделать.
<! Doctype html> <html lang = en> <head> <meta charset = utf-8> <title> d131_clearfloat </title> <style> .smallbox1 {width: 100px; высота: 100px; фоновый цвет: красный; Бодер: 3PX SOLIT BLACK; Маржа: 5px; float: справа;} .smallbox2 {width: 100px; высота: 100px; фоновый цвет: красный; Бодер: 3PX SOLIT BLACK; Маржа: 5px;} .smallbox3 {ширина: 100px; фоновый цвет: красный; Бодер: 3PX SOLIT BLACK; Маржа: 5px;} .smallbox3 {ширина: 100px; высота: 100px; фоновый цвет: красный; Бодер: 3PX SOLIT BLACK; Маржа: 5px;} .smallbox4 {ширина: 100px; высота: 100px; фоновый цвет: красный; Бодер: 3PX SOLIT BLACK; Маржа: 5px;} .smallbox5 {ширина: 100px; высота: 100px; фоновый цвет: красный; Бодер: 3PX SOLIT BLACK; Margin: 5px;} .smallbox6 {ширина: 100px; высота: 100px; фоновый цвет: красный; Тело: 3px твердый черный; Margin: 5px;} .bigbox1, .bigbox2 { /*Ширина: 400px;* / /*Ширина: 400px;* / foangy-color: green; Граница: 3px черный твердый; }</style></head><body><div class=bigbox1> <div class=smallbox1></div> <div class=smallbox2></div> <div class=smallbox3></div></div><div class=bigbox2> <div class=smallbox4></div> <div class=smallbox5></div> <div class=smallbox2> <div class=smallbox4></div> <div class = smallbox5> </div> <div class = smallbox6> </div> </div> </body> </html> 2. Второй способ очистить поплавокДобавьте четкий атрибут к следующему атрибуту
Чистый атрибут принимает значение:
Нет: значение по умолчанию принимается, отсортируется в соответствии с правилами сортировки плавучих элементов (левое плавание, чтобы найти левый поплавок, правый поплавок, чтобы найти правый поплавок)
Слева: не ищите левый плавающий элемент впереди
Справа: не ищите правильный плавучий элемент впереди
Оба: не ищите левые плавающие и плавучие элементы впереди
Например: мы не устанавливаем ширину и высоту большой коробки, маленькая коробка будет поддерживать большую коробку, но из -за этого две большие коробки будут в ряду.
.smallbox1 {ширина: 100px; высота: 100px; Плавание: осталось; фоновый цвет: красный; Граница: 2px твердый черный; } .smallbox2 {width: 100px; высота: 100px; Плавание: осталось; фоновый цвет: красный; Граница: 2px твердый черный; } .smallbox3 {width: 100px; высота: 100px; Плавание: осталось; фоновый цвет: синий; Граница: 2px твердый черный; } .smallbox4 {width: 100px; высота: 100px; Плавание: осталось; фоновый цвет: синий; Граница: 2px твердый черный; } </style> </head> <body> <div class = bigbox1> <div class = smallbox1> </div> <div class = smallbox2> </div> </div> <div class = bigbox2> <div class = smallbox3> </div> <div class = smallbox4> </div> </div> </body> </div> <div = smallbox4> </div> </div> </body> </div> <div = smallbox4> </div> </div> </body> </div> <div = smallbox4> </div> </div> </body>Мы используем атрибут Clear на третьей маленькой коробке, чтобы мы могли запустить новую строку (четвертая не нужна, потому что мы хотим, чтобы третий был рядом с четвертой), и нам нужен только код третьего маленького коробки, чтобы изменить код.
.smallbox3 {clear: Left; Ширина: 100px; высота: 100px; Плавание: осталось; фоновый цвет: синий; Граница: 2px твердый черный; }Примечание: атрибут маржи истек, и мы поговорим о методе, который не истечет в следующий раз.
3. исходный код:D131_clearfloat.html
D132_clearattribute.html
адрес:
https://github.com/ruigege66/html_learning/blob/master/d131_clearfloat.html
https://github.com/ruigege66/html_learning/blob/master/d132_clearattribute.html
СуммироватьВышеуказанное - два способа очистить плавающий HTML, который редактор представляет вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!
Если вы думаете, что эта статья полезна для вас, пожалуйста, перепечатайте ее. Пожалуйста, укажите источник, спасибо!