Подробное объяснение CSS float

внешний интерфейс HTML CSS

Атрибут float – часто используемый атрибут в CSS. Он имеет широкий спектр сценариев применения, а также является сложным моментом. Он включает в себя некоторые важные детали и требует внимания. Поэтому она специально организована и обобщена.

1. Введение в поплавок

Плавающие элементы также называются плавающими элементами.Элементы с установленным атрибутом float будут плавать влево или вправо в зависимости от значения атрибута. Плавающий элемент выходит за рамки обычного потока документа, но плавающий элемент влияет не только на себя, но и на выравнивание и перенос окружающих элементов. Проще говоря, пусть блочный элемент игнорирует плавающий элемент, а встроенный элемент окружает плавающий элемент, как проточная вода, для достижения плавающего макета. Обтекание изображений текстом — это типичный сценарий применения float, как показано ниже:

HTML-код

<img class="float" src="image1.jpg">
<p class="around">Harry Potter is a series of fantasy novels written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School of Witchcraft and Wizardry. </p>

css-код

.float{
	float:left;
	margin: 10px;
	width: 100px;
	height: 100px;
}
.around {
	background: #00ff90;
	width:300px;
	padding: 10px;
}

Как видно из рисунка выше, после того, как элемент img установлен на float: left, он покинет поток документов и будет существовать слева. Элемент p игнорирует существование элемента img и обтекает изображение из левого верхнего угла окна, но текст в элементе p понимает существование элемента img и обтекает изображение. И элемент img плавает поверх элемента p.

Во-вторых, характеристики поплавкового элемента

1. Коробка уровня блока

Независимо от того, является ли элемент встроенным или блочным, если для него задано значение float, плавающий элемент будет генерировать блок уровня блока, а его ширину и высоту можно задать, поэтому float часто используется для горизонтально расположенные меню, которые можно изменять по размеру и горизонтальное расположение.

Начнем с примера блочного элемента.

HTML-код

    <div class="div1">
		<img src="image1.jpg">
	</div>
	<div class="div2">
		<img src="image2.jpg">
	</div>

css-код

.div1{
	padding: 10px;
	border: 3px solid black;
}
.div2 {
	float: left;
	padding:10px;
	border: 3px solid red;
}

По умолчанию ширина элемента div равна 100%. Как только элемент div становится плавающим, он сразу же переносится, как встроенный элемент, а ширина адаптируется к содержимому.

Вот пример элемента в строке:

HTML-код

	<div class="box">
        <span class="rule1">
            首页
        </span>
        <span class="rule1">
            发现
        </span>
        <span class="rule1">
            动态
        </span>
        <span class="rule1">
            我的
        </span>
    </div>

css-код

.box { 
	background: #d32d2d; 
	padding: 10px; 
	width: 500px; 
	height: 400px; 
}
.rule1 { 
	float: left; 
	margin: 10px; 
	padding: 10px; 
	background: #eee; 
	width: 100px; 
	text-align: center; 
}

Из приведенного выше рисунка видно, что когда span устанавливает свойство float, можно указать значения ширины и высоты. В то же время можно обнаружить, что когда несколько элементов указаны как плавающие и левые/правые одновременно, элементы располагаются рядом друг с другом, и они располагаются в новой строке, когда встроенной ширины недостаточно. .

2. Высокий коллапс

HTML-код

    <div class="div1">
		<img src="image1.jpg">
	</div>
	<div class="div2">
		<img src="image2.jpg">
	</div>

css-код

.div1{
	padding: 10px;
	border: 3px solid black;
}
.div2 {
	border: 3px solid red;
}
.div2 img {
	float: left;
	padding:10px;
}

Установите атрибут float для элемента img внутри div2, вы можете видеть, что высота div2 не поддерживается элементом img, поэтому это также называется коллапсом высоты. Поскольку элемент img установлен как элемент с плавающей запятой, он находится вне потока документа. Следовательно, в div2 нет элемента, поэтому происходит коллапс высоты. Как решить проблему коллапса высоты, будет рассказано позже.

В-третьих, четкий атрибут

Роль свойства clear состоит в том, чтобы очистить поплавок.

  clear : none | left | right | both

   取值：

   none  :  默认值。允许两边都可以有浮动对象

   left   :  不允许左边有浮动对象

   right  :  不允许右边有浮动对象

   both  :  不允许有浮动对象

HTML-код

    <div class="div1">
	</div>
	<div class="div2">
	</div>

css-код

.div1{
	float: left;
	width: 300px;
	height: 150px;
	padding: 10px;
	border: 3px solid black;
	background-image: url("image1.jpg")
}
.div2 {

	border: 3px solid red;
	padding:10px;
	width:500px;
	height:200px;
	background-image: url("image2.jpg")
}

Как показано на рисунке выше, поскольку div1 является плавающим элементом, div2 размещается внизу div1. Если вы хотите сделать перенос div2 и расположить его ниже нижней части div1, вам нужно использовать атрибут clear в это время.

css-код

.div1{
	float: left;
	width: 300px;
	height: 150px;
	padding: 10px;
	border: 3px solid black;
	background-image: url("image1.jpg")
}
.div2 {
    clear: left;
	border: 3px solid red;
	padding:10px;
	width:500px;
	height:200px;
	background-image: url("image2.jpg")
}

Просто добавьте его в div2clear: left.

Для CSS clear float важно помнить, что это правило влияет только на сам элемент, который использует clear, а не на другие элементы.

На приведенном выше рисунке показан пример, и div1, и div2 установлены.float：left. Если я добавлю clear:right к стилю CSS div1, чтобы заставить div2 двигаться вниз, это не даст никакого эффекта. Поскольку этот clear float вызывается в div1, он может влиять только на div1, а не на div2. Чтобы div2 перемещался вниз, вы должны использовать float в стиле CSS div2. Слева от div2 находится плавающий элемент div1, поэтому, если вы используете clear:left; в стиле CSS div2, чтобы указать, что плавающие элементы не разрешены слева от элемента div2, div2 вынужден переместиться вниз на один линия.

4. БФК

Причина, по которой вводится BFC, заключается в том, что он тесно связан с float.

1. Введение BFC

определение

Некоторые элементы, такие как элементы с плавающей запятой, элементы с абсолютной позицией, встроенные в блок, ячейки таблицы или заголовок таблицы, а также элементы, чье свойство переполнения не отображается, будут создавать новый контекст форматирования на уровне блока (контекст форматирования блока). это то, что мы называем BFC.

форма

BFC также является блоком в HTML (невидимым), и BFC может быть сформирован только в том случае, если выполняется хотя бы одно из следующих условий:

  • Свойство float не равно none.
  • Свойство position не является статическим и относительным.
  • Свойство display может быть одним из следующих: table-cell, table-caption, inline-block, flex, inline-flex.
  • Свойство переполнения не отображается.

правила компоновки

  • Внутренние коробки будут размещены одна за другой в вертикальном направлении.
  • Boxвертикальное направлениеРасстояние определяется запасом. Поля двух соседних блоков, принадлежащих одному и тому же BFC, будут перекрываться.
  • Левая сторона поля поля каждого элемента касается левой стороны поля границы содержащего блока (для форматирования слева направо, в противном случае наоборот). Это верно, даже если есть поплавки.
  • Область BFC не будет перекрывать флоат-бокс.
  • BFC — это изолированный и независимый контейнер на странице, и дочерние элементы внутри контейнера не будут влиять на внешние элементы.
  • Расчет высоты BFC, плавающие элементы также участвуют в расчете

Некоторые правила могут быть не совсем понятны, но вы поймете это после прочтения следующего содержания.

2. Роль БФК

Удалить свертывание полей

При нормальных обстоятельствах все блоки в контейнере располагаются вертикально сверху вниз, то есть один элемент занимает строку, а смежное расстояние по вертикали (то есть поля) определяется их соответствующими полями, а не суперпозицией двух поля.

Давайте посмотрим пример:

html-код:

<div class="container">
  <p>条目 1</p>
  <p>条目 2</p>
  <p>条目 3</p>
</div>

css-код:

.container {
	width: 300px;
  background-color: black;
  overflow: hidden;
}

p {
  background-color: white;
  margin: 10px 0;
  text-align: center;
}

В идеале мы бы подумали, что поле между тегами p должно быть их суммой (20 пикселей), но на самом деле оно равно 10. Это на самом деле схлопывание полей. В гибком макете нет сворачивающихся полей, а также нет сворачивающихся полей в горизонтальном направлении.

Сворачивающиеся поля можно устранить с помощью BFC. Имейте в виду, что вертикальные поля будут складываться, только если элементы находятся в одном BFC. Если они принадлежат разным BFC, коллапса маржи не будет. Следовательно, мы можем создать BFC, чтобы предотвратить схлопывание маржи. Итак, чтобы сделать их поля равными 20, нам просто нужно использовать div, создать BFC и сделать элемент p в другом BFC.

HTML-код

<div class="container">
  <p>条目 1</p>
  <p>条目 2</p>
  <div class="newBFC">
  	  <p>条目 3</p>
  </div>
</div>

css-код

.container {
	width: 300px;
  background-color: black;
  overflow: hidden;
}

p {
  background-color: white;
  margin: 10px 0;
  text-align: center;
}
.newBFC {
  overflow: hidden;
}

Удерживает плавающие элементы

Это должно решить проблему высокого коллапса, с которой столкнулись выше.

Просто нужно изменить код CSS и добавить BFC для размещения плавающих элементов.

.div1{
    padding: 10px;
    border: 3px solid black;
}
.div2 {
	overflow: hidden;
    border: 3px solid red;
}
.div2 img {
    float: left;
    padding:10px;
}

Кроме того, существуют следующие способы решения коллапса высоты:

Добавьте дочерний элемент, который очищает поплавок

HTML-код

    <div class="div1">
        <img src="image1.jpg">
    </div>
    <div class="div2">
        <img src="image2.jpg">
        <div style="clear: both"></div>
    </div>

Добавьте элемент div, так как это прозрачный элемент, он будет отображаться внизу элемента img, поэтому он будет поддерживать высоту div2.

Предотвратить перенос текста

В большинстве случаев (без специальных настроек), как на рисунке 1, текст будет обтекать плавающий элемент, но иногда это не то, что мы ожидаем. То, что мы ожидаем, это рисунок 2, как показано на рисунке:

Чтобы добиться эффекта, показанного на рисунке 2, вам нужно всего лишь изменить текстовую область справа на BFC, как показано на следующем рисунке.

V. Резюме

Выше приведено содержание, связанное с float, которое включает в себя многое, что также отражает важность float.Существует множество сценариев применения для float.

Категории